Shulou(Shulou.com)06/01 Report--

This article mainly introduces the CSS deep selector how to understand the relevant knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that everyone after reading this CSS deep selector how to understand the article will have a harvest, let's take a look.

We know that using ">" or / deep/ is a deep selector for selecting related elements in subcomponents, and today we found that ">" can only write one on a selector.

From the last book, we know

> .level {

Color: red

}

A deep selector like this produces the following style

[data-v-147fc646] .level {

Color: red

}

Today, the style of the reorganization of the part library was intended to be perfect.

> .level > > .level3 {

Color: red

}

As a result, I found that it didn't work. After opening it, I found that it had been converted into

[data-v-147fc646] .level > > .level3 {

Color: red

}

The ">" is not recognized by the browser, so the selector becomes an invalid selector.

So if you really want to. Deep selection under level. What about level3? in fact, you only need to use the original descendant selector here.

> > .level .level3 {

Color: red

}

It is escaped as

[data-v-147fc646] .level .level3 {

Color: red

}

That is to say, for the use of deep selector in Scope CSS, there is only one time for ">", but there is an error if you write too much, and there is no warning or prompt for the error.

This is the end of the article on "how to understand the CSS Deep Selector". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to understand the CSS deep selector". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.