Shulou(Shulou.com)05/31 Report--

Today Xiaobian to share with you about the use of CSS derivative selector case analysis of the relevant knowledge, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you will learn something after reading this article, let's take a look at it.

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 (contextualselectors) because they rely on context to apply or avoid a rule. In CSS2, they are called CSS derived selectors, but no matter what you call them, they serve the same purpose.

The CSS derived selector allows you to style a tag based on the context of the document. By using CSS 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 CSS derived selector like this:

Listrong {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 style of the strong element in the li element is italic, 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;} h3strong {color:blue;}

Here is the HTML it exerts its influence:

Thestronglyemphasizedwordinthisparagraphisred.

Thissubheadisalsored. Thestronglyemphasizedwordinthissubheadisblue above is all the content of the article "case Analysis of the use of CSS derived Selector". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to 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.