CSS derived selectors

[Introduction] Derived selectors You can make markup more concise by defining styles based on the context of the element in its position. In CSS1, selectors that apply rules in this way are called contextual selectors because they rely on context to respond.

Derived selectors

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 the context of the blue code marked :

< ;p>I am in bold, not italics, because I am not in the list, so this rule does not work for me

My words are in italics. This is because the strong element is inside a li element.

I am a normal font.

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 or class for the strong element. id, the code is more concise.

Look at the following CSS rules:

strong {
color: red;
}

h2 {
color: red;
}

h2 strong {
  color: blue;
  }

Here is the HTML it affects:

The strongly emphasized word in this paragraph isred.

This subhead is also red.

The strongly emphasized word in this subhead isblue.

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