What are the common problems with CSS selectors?

This time to bring you CSS selectors what are the common problems, to deal with the CSS selector frequently asked questions about what, the following is the actual case, together to see.

What kinds of selectors are common?
1. Tag Selector
p{}/Select the element with the tag name P
2. Class Selector
. box{}/Select an element of class named Box/
3.ID Selector
#header {}/Select element with ID named header/
1.4 Wildcard Selector
{}/selects all elements in the page/
1.5 selector Prefix
div.bd{}/Select the element with the class name BD and the label Div
1.6 Property Selector
[Disabled] {}/selects all elements with attribute disabled */

What is the priority of the selector?
！ important> inline style >id selector > Pseudo Class > Property selector > class selector > Element (type) selector > Universal Selector (*) > Browser customization

Class and ID usage scenarios?
The ID quickly gets the label object based on the unique ID number provided. Class puts some specific styles in a class and requires a label for this style to be added.

Why should I delimit the appropriate namespaces when using CSS selectors?
To prevent style contamination.

What do the following selectors mean, respectively?

#header {}/Select an element with an ID named header/.header{}/Select the element/.header with the class name header. logo{}/Select all elements named logo in the header element/.header.mobile{ }/Select the element/.header p, which is named header and is mobile, h3{}/Select all the P tags and H3 tags/#header in class named header. nav>li{}/ Select the Grandparent element ID named header inside the parent element class named Nav under the tag/#header a:hover{}/Select the grandparent element ID named hover element in header a tag

List the pseudo-class selectors you know
: Active adds a style to the element being activated.
: Focus adds a style to the element that has keyboard input focus.
: Hover adds a style to an element when the mouse hovers over the element.
: Link adds a style to a link that has not been accessed.
: visited adds a style to the link that has been visited.
: First-child adds a style to the first child element of an element.
: Lang adds a style to the element with the specified lang attribute.

Run the following code to parse the reason for the output style.

<! DOCTYPE html>
: First-child and: The role and difference of first-of-type?
: First-child matches the first child element of a parent element, which can be said to be the first child of a structure.
: First-of-type matches the first of the child elements of the same type under a parent element.

If you encounter an attribute that you want to know about compatibility, where to look?
View in caniuse.com.

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Related reading:

JavaScript Arrays-strings-math functions

Simple CSS3-click Response Animation case

The DOM and events of jquery