css-derivation Selector

Derivation Selector
In CSS1, selectors that apply rules in this way are called contextual selectors (contextual selectors) because they rely on context to apply or avoid a rule. In CSS2, they are called derivation selectors, but they work the same regardless of what you call them.
The derivation selector allows you to determine the style of a label based on the contextual relationship of the document. By using the derivation selector rationally, we can make the HTML code cleaner.
For example, if you want the strong element in the list to become italic rather than the usual bold word, you can define a derivation selector:
Li Strong {
Font-style:italic;
Font-weight:normal;
}
Example:
I'm bold, not italic, because I'm not in the list, so this rule doesn't work for me.
I am the italic character. This is because the strong element is inside the LI element.
I am the normal font.
In the example above, only the strong element in the LI element is styled in italics, and the code is more concise without having to define a particular class or ID for the strong element.
Then look at the following CSS rules:
Strong {
color:red;
}
H2 {
color:red;
}
H2 Strong {
Color:blue;
}
The following is the HTML that it exerts effect on, as follows:
The strongly emphasized word in this paragraph isred.
This subhead is also red.
The strongly emphasized word in this subhead isblue.