Example Analysis of grouping and inheritance in CSS Selector

Editor to share with you the example analysis of grouping and inheritance in the CSS selector. I hope you will get something after reading this article. Let's discuss it together.

CSS derived selector

The derived selector allows you to define the style of a tag based on the context in which the element is located.

In CSS1, selectors that apply rules in this way are called context selectors (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 serve the same purpose.

Example

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

Note: the derived selector in the above code changes the strong element in the list to italic instead of the usual bold.

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.

Tip: note the contextual relationship of the marked code. Only the strong element in the li element is italic.

Example

Strong {color: red;} h3 {color: red;} h3 strong {color: blue;}

The strongly emphasized word in this paragraph isred.

This subhead is also red.The strongly emphasized word in this subhead isblue. After reading this article, I believe you have some understanding of "sample analysis of grouping and inheritance in CSS selector". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!