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

This article mainly explains "how to define CSS derived selector". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to define CSS derived selector".

CSS derived selector

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. Thank you for your reading, the above is the content of "how to define CSS derivative selector". After the study of this article, I believe you have a deeper understanding of how to define CSS derivative selector, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.