CSS Design Guide Context Selector

Suppose you have the following scenario: you want to separate the paragraph text in article and aside by setting a different font size. Problems like this "location-based" transform label style can be resolved with a contextual selector.

1. Normal context Selectors

Format: Label 1 label 2 {declaration}

Label 2 is the target we want to select, and is selected only if label 1 is its ancestor (not necessarily the parent element).

Article p{color:red;} The context selector In this example indicates that only the P element of the article descendant will apply the following style

2. Sub-selectors >

Format: Label 1 > Label 2 {declaration}

Label 2 is the target we want to select, and is selected only if the label 1 is its parent element.

3. Close to sibling selector +

Format: Label 1 + label 2 {declaration}

Label 2 is the target we want to choose, and label 2 must be immediately behind its fellow label 1.

4. General Sibling Selector ~

Format: Label 1 + label 2 {declaration}

Label 2 is the target we want to choose, and the label 2 must (not necessarily immediately followed) at the back of its fellow label 1

5. Universal Selector *

* is a wildcard character that matches any element.

*{color:red;} will cause all elements to turn green

P *{color:red will turn the text of all elements contained in P into a knockout, but the text of P itself will not change color.

This selector has a very interesting use, that is, to make a non-sub-selector, such as section * a{Declaration}, any part of the grandson element, not the child element of a tag will be selected.

The above is the knowledge of context selectors I know, but in the learning of sub-selectors encountered a problem, trouble to understand the children's shoes to help answer,

Supposedly, the H2 element in the P element should not turn red, but how does it change color?

Context selectors for the CSS design guide