CSS generation selector and multi-class selector, css generation selector multi-class

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.