CSS Selector detailed introduction

CSS3 Basic Selector

To better illustrate the problem, first create a simple DOM structure, as follows:

<div class= "Demo" >     <ul class= "Clearfix" >        <li id= "First" class= "first" >1</li>        <li class= "active important" >2</li>        <li class= "Important items" >3</li>        <li class = "Important" >4</li>        <li class= "items" >5</li>        <li>6</li>        <li> 7</li>        <li>8</li>        <li>9</li>        <li id= "Last" class= "last" >10</ li>    </ul> </div>

One, wildcard selector (*)
The wildcard selector is used to select all elements, or to select all elements under an element. Such as:

The code is as follows:
*{marigin:0; padding:0;}
The above code is certainly seen in the Reset style file, and what he is saying is that the margin and padding of all the elements are set to 0, and the other is to select all the elements under an element:

The code is as follows:

. demo * {border:1px solid blue;}

Second, Element selector (E)
Element selectors, which are the most common and basic selectors in the CSS selector. Element selectors are actually elements of the document, such as Html,body,p,div and so on, such as our demo: The elements include Div,ul,li and so on.

The code is as follows:

Li {background-color:grey;color:orange;}

Iii. class selector (. className)
A class selector specifies a style in a way that is independent of the document element, which requires the class name to be defined on the HTML element before the class selector is used, in other words to ensure that the class name exists in the HTML tag in order to select the class, such as:

<li class= "active important items" >2</li>
The total "active,important, items" is that we add a class name to Li, so that the class selector works properly, thus better associating the style of the class selector with the element.

. important {font-weight:bold; color:yellow;}
The above code indicates that the element with the important class name is added with a "bold font, yellow color" style;

Class selectors can also have a multi-class name, we also see that we LI element in the same time there are two or many class names, where they are separated by a space, then the selector can also use a multi-class connection, such as:

The code is as follows:

. important {Font-weight:bold;}
. active {Color:green;background:lime;}
. Items {color: #fff; background: #000;}
. important.items {background: #ccc;}
. first.last {color:blue;}

As the code above shows, the ". Important.items" selector only has the "important" and "items" two classes in the element to work. Class selectors are supported in all browsers, but multi-class selectors (. classname1.classname2) are not supported by IE6.

V. Descendant selector (E F)

The descendant selector is also called the include selector, and the function is to select the descendant elements of an element, such as: E F, front e is the ancestor element, F is the descendant element, the meaning is to select all the descendants of E element f element, please note that they need a space separated. Here f either the child element of the E element, or the grandchild element, or a deeper relationship, will be selected, in other words, regardless of how many layers of F in E are selected:

. demo Li {color:blue;}
The above indicates that all the LI elements in Div.demo are selected

Six, child element selector (E>F)

The child element selector can only select child elements of an element where E is the parent element and F is a child element, where e>f represents the selection of all child elements under the E element F. This is not the same as the descendant selector (E F), where F is the descendant element of E in the descendant selector, and the child element selector e > F, where F is only the child element of E.
ul > li {background:green;color:yellow;}
On the code to indicate the selection of all child elements under UL Li. Such as:
IE6 does not support child element selectors.

Seven, adjacent sibling element selector (E + F)

Adjacent sibling selectors can select elements immediately following another element, and they have an identical parent element, in other words, the EF two element has an identical parent element, and the f element is behind the e element, and adjacent, so that we can use the adjacent sibling element selector to select the F element.

The code is as follows:

Li + li {background:green;color:yellow; border:1px solid #ccc;}

The above code represents the selection of Li's neighboring elements Li, we have a total of 10 Li, then the above code selected from the 2nd Li to 10 Li, altogether nine

IE6 does not support this selector

Viii. Universal Brotherhood Selector (e ~ f)

The universal sibling Element selector is a new selector for CSS3, which selects all the sibling elements that follow an element, and they are similar to the neighboring sibling elements and need to be within the same parent element, in other words, the E and F elements belong to the same parent element, and the F element is after the e element, then E ~ F The selector selects the F element after all E elements in. For example, the following code:

The code is as follows:

. Active ~ li {background:green;color:yellow; border:1px solid #ccc;}

The above code represents the selection of all sibling elements that follow the li.active element li

Ix. Group selector (Selector1,selector2,..., Selectorn)

Group selectors are groups of elements with the same style, separated by commas "," between each selector, as shown above Selector1,selector2,..., Selectorn. This comma tells the browser, the rule contains a number of different selectors, if there is no such comma, then the meaning of the expression is completely different, omit the comma is what we said before the descendant selector, this is in use, we must be careful caution.