CSS generation selector and multi-class selector, css generation selector multi-class
<Newcomers report to Alibaba Cloud, welcome to shoot bricks #->
I. Descendant Selector
Let's talk about the CSS descendant selector. It is a type of derivative selector, and its affiliated relationship is as follows:
--> Derivative Selector
---- CSS descendant Selector
---- CSS sub-element Selector
---- CSS adjacent sibling Selector
So the question is, when do we need to use the descendant selector? If you need to set A special style for the span element (. A Class) in the p element, you can use the descendant selector to select the element:
/* Method 1 */
P span {...}
/* Method 2 */
P. {...}
Note: The two selectors of the preceding code are separated by spaces and spaces. In addition, the descendant selector is usually free to use. In the above example, the p element is not necessarily the father of span, as long as it is an immediate elder of span, such as grandpa. In other words, when the p element contains the span element, the descendant selector can play a role.
Ii. multi-class selector
Next, let's talk about the multi-class selector. For example:
.funny{...}.handsome{...}.funny.handsome{...}
Note that the two selectors of the above Code are not separated by spaces. Okay, now there is. funny and. handsome: Obviously, "I am an interesting and handsome boy, neither of which is me" is a true proposition, so there is only ". funny. handsome. However, the single ". funny" option cannot be selected for me. For the reason, see the true proposition mentioned above. The same applies to the ". handsome" selector.
Well, it's easy. There are a lot of useful selector types. For example, you can set "1. clicked (. selected); 2. Button style:
button.selected{...}
This is my first blog post, XD. Complete.