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

Editor to share with you the example analysis of CSS derived selector. I hope you will get something after reading this article. Let's discuss it together.

You can make tags more concise by defining styles based on the contextual relationship of elements in their locations.

In CSS1, selectors that apply rules in this way are called context selectors (contextual selectors) because they rely on context to apply or avoid a rule. In CSS2, they are called derived selectors, but no matter what you call them, they serve the same purpose.

The derived selector allows you to style a tag based on the context of the document. By using derived selectors properly, we can make our HTML code cleaner.

For example, if you want the strong element in the list to become italic instead of the usual bold, you can define a derived selector like this:

Li strong {

Font-style: italic

Font-weight: normal

}

Note the context of the blue code marked:

I'm in bold, not italic, because I'm not on the list, so this rule doesn't work for me.

I am in italics. This is because the strong element is inside the li element.

I am a normal font.

In the above example, only the strong element in the li element has the style of italics, and there is no need to define a special class or id for the strong element, so the code is more concise.

Take a look at the following CSS rules:

Strong {

Color: red

}

H3 {

Color: red

}

H3 strong {

Color: blue

}

Here is the HTML it exerts its influence:

The strongly emphasized word in this paragraph isred.

This subhead is also red.

The strongly emphasized word in this subhead isblue.

After reading this article, I believe you have some understanding of "sample Analysis of CSS derived Selector". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

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.