Descendant selectors and multi-class selectors after CSS

1. Descendant selector

　Speaking of CSS descendant selectors. It is one of the derived selectors, and the relationship between the two is as follows:

-->Derived Selector

----CSS descendant selector

----CSS child element selector

----CSS adjacent sibling selector

So the question is, when do we need to use the descendant selector? Suppose you need to set a special style for the span element (.A class) in the p element, you can select the element with the descendant selector:

<span style="color: #800000;">/*方式1*/<br>p span</span>{<span style="color: #ff0000;">...</span>}<br>/*方式2*/<br>p .A{...}

Note that the two selectors in the above code are separated by spaces. Additionally, descendant selectors are very free to use. Let's put it this way, in the above example, the p element does not necessarily have to be the father of span, as long as it is the direct elder of span, such as grandpa. In other words, in the case where the p element contains a span element, the descendant selector can come into play.

2. Multi-category selector

Next, let’s talk about multi-type selectors. For example:

<span style="color: #800000;">.funny</span>{<span style="color: #ff0000;">...</span>}<span style="color: #800000;">
.handsome</span>{<span style="color: #ff0000;">...</span>}<span style="color: #800000;">
.funny.handsome</span>{<span style="color: #ff0000;">...</span>}

Note that there are no spaces separating the two selectors in the above code. Okay, now there are two categories: .funny and .handsome. Obviously "I am a funny and handsome boy, neither of them is me" is a true proposition, so there is only the multi-category choice of ".funny.handsome" Only then can you choose me. But ".funny" alone cannot select me. The reason is shown in the true proposition mentioned above. The same is true for the ".handsome" selector.

Okay, let’s not make trouble anymore. Multi-category selectors have many uses. For example, if you want to set “1. Clicked (.selected); 2. Button style”, you can use:

<span style="color: #800000;">button.selected</span>{<span style="color: #ff0000;">...</span>}

This is the first blog post I wrote on the blog, XD. complete.