How to use css derived selector

How to use css derived selectors: Derived selectors allow the style of a certain tag to be determined based on the context of the document. By using derived selectors rationally, the HTML code can be made cleaner.

(Recommended tutorial: css video tutorial)

How to use css derived selector:

You can make markup more concise by defining styles based on the context of an element's location.

In CSS1, selectors that apply rules in this way are called 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 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 element 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 that the mark is <strong></strong> The context of the blue code:

<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, and there is no need to define a special class for the strong element. or id, the code is 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 id="This-nbsp-subhead-nbsp-is-nbsp-also-nbsp-red">This subhead is also red.</h2>
<h2 id="The-nbsp-strongly-nbsp-emphasized-nbsp-word-nbsp-in-nbsp-this-nbsp-subhead-nbsp-is-strong-blue-strong">The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>

The above is the detailed content of How to use css derived selector. For more information, please follow other related articles on the PHP Chinese website!