CSS after generation selector and multi-class selector

< new report, welcome to shoot Brick #-

One, descendant selector

Talk about the descendant selectors of CSS. It belongs to one of the derived selectors, and the subordinate relationships are as follows:

--Derivation Selector

----CSS descendant Selectors

----CSS child element selectors

----CSS adjacent Sibling selector

So the question is, when do I need to use the descendant selector? Suppose you need a SPAN element in the P element (. Class A) sets a special style that can be selected with the descendant selector:

/* Mode 1*/
P span{...}
/* Mode 2*/
P. A{...}

Note that the above code has two selectors separated by a space space space. In addition, descendant selectors are often free to use gray. Let's just say that the P element in the above example does not have to be a span father, as long as the immediate elders of span such as Grandpa can. In other words, the descendant selector works when the P element contains a SPAN element.

Second, multi-class selector

Next, say a multi-class selector. As an example:

. Funny {...} . Handsome {...} . Funny.handsome {...}

Note that there is no space separation between the two selectors for the above code. OK, now there are. Funny and. Handsome these two classes, obviously "I am a funny and handsome boy, both lack of one is not me" is a true proposition, so only ". Funny.handsome" This multi-class selector can choose me. But the individual ". Funny" Cannot choose me, for the same reason as the true proposition mentioned earlier, the ". Handsome" selector is identical.

All right, there's a lot of use for multi-class selectors, like setting "1, being clicked (. selected); 2, button style", you can use:

button.selected {...}

This is the first post I wrote in the blog Park, XD. Complete.

CSS after generation selector and multi-class selector