What is the CSS derived selector defined by?

#CSS Derived Selectors

You can make markup more concise by defining styles based on the context of an element in its position. (Recommended learning: CSS video tutorial)

In CSS1, selectors that apply rules in this way are called contextual selectors because they depend on Apply or avoid a rule depending on the context. In CSS2, they are called derived selectors, but no matter what you call them, they do the same thing.

Derived selectors allow you to style a tag based on the context of the document. By judiciously using derived selectors, we can make our HTML code cleaner.

For example, if you want the strong elements in the list to be in italics instead of the usual bold, you can define a derived selector like this:

li strong {
    font-style: italic;
    font-weight: normal;
  }

Please note the context of the blue code marked :

<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>

<ol><li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li><li>我是正常的字体。</li>
</ol>

In the above example, only the strong element in the li element is styled in italics, no need to The strong element defines a special class or id, making the code more concise.

Look again at the following CSS rule:

strong {
     color: red;
     }

h2 {
     color: red;
     }

h2 strong {
     color: blue;
     }

Here’s the HTML it affects:

<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
<h2>This subhead is also red.</h2>
<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>

The above is the detailed content of What is the CSS derived selector defined by?. For more information, please follow other related articles on the PHP Chinese website!