CSS selectors in detail

CSS3 basic selector

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

<div> 
    <ul> 
       <li>1</li> 
       <li>2</li> 
       <li>3</li> 
       <li>4</li> 
       <li>5</li> 
       <li>6</li> 
       <li>7</li> 
       <li>8</li> 
       <li>9</li> 
       <li>10</li> 
   </ul> 
</div>

1. Wildcard selector (＊)
Wildcard selector is used to select all elements , you can also select all elements under a certain element. For example:

The code is as follows:
, the other is to select all elements under a certain element:

The code is as follows:

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

2. Element selector (E)
Element selector is css The most common and basic selector among selectors. Element selectors are actually elements of the document, such as html, body, p, div, etc. For example, in our demo: the elements include div, ul, li, etc.

The code is as follows:

li {background-color: gray;color: orange;}

3. Class selector (.className)

The class selector specifies the style in a way that is independent of the document element. Before using the class selector, you need to define the class name on the html element. In other words, you need to ensure that the class name exists in the html tag so that the class can be selected, such as:

2
In "active, important, items", we add a class name to li so that the class selector can work normally and better associate the style of the class selector with the element.

.important {font-weight: bold; color: yellow;}
The above code means to add a "font-weight, color: yellow" style to the element with the important class name;
The class selector also It is possible to have multiple class names. As we saw above, there are two or more class names in our li element at the same time, and they are separated by spaces. Then the selector can also be connected together using multiple classes, 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 shown in the above code, the ".important.items" selector only selects elements that contain both "important" and "items" "Two classes can work. All browsers support class selectors, but multi-class selectors (.className1.className2) are not supported by IE6.

5. Descendant selector (ＥF)

The descendant selector is also called the inclusion selector. Its function is to select the descendant elements of a certain element, for example: E F. The preceding E is the ancestor element and F is the descendant. Element means that all descendant F elements of the E element are selected. Please note that they need to be separated by a space. Here, F will be selected regardless of whether it is a child element, a grandchild element, or a deeper relationship of the E element. In other words, no matter how many levels of relationships F has in E, it will be selected:

.demo li { color: blue;}

The above means that all li elements in div.demo are selected

6. Child element selector (E>F)

The child element selector can only select the child elements of a certain element. Among them, E is the parent element, and F is the child element. E>F means that all child elements F under the E element are selected. This is different from the descendant selector (EF), in which F is a descendant element of E, and the child element selector E > F, where F is only a child element of E.

ul > li {background: green;color: yellow;}
The code above indicates that all sub-elements li under ul are selected. For example:
IE6 does not support child element selectors.

7. Adjacent sibling element selector (E + F)

Adjacent sibling selector can select elements immediately after another element, and they have the same parent element, in other words, EF The two elements have the same parent element, and the F element is behind the E element and adjacent, so 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 means selecting the adjacent element li of li. We have a total of ten li here , then the above code selects from the 2nd li to the 10th li, a total of nine

IE6 does not support this selector

8. Universal sibling selector (Ｅ～Ｆ)

The universal sibling element selector is CSS3 A new selector is added. This selector will select all sibling elements behind an element. They are also similar to adjacent sibling elements and need to be in the same parent element. In other words, the E and F elements belong to the same Within the parent element, and the F element is after the E element, then the E ~ F selector will select the F elements after all the E elements. For example, the following code:

The code is as follows:

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

What the above code means is that all sibling elements li behind the li.active element are selected

9. Group selector (selector1, selector2,...,selectorN)

Group selector groups elements with the same style together. Each selector is separated by a comma ",", as above Shown are selector1,selector2,...,selectorN. This comma tells the browser that the rule contains multiple different selectors. If there is no this comma, the meaning expressed is completely different. Omitting the comma becomes the descendant selector we mentioned earlier. This is what everyone knows Be careful when using it.

For more detailed introduction to CSS selectors and related articles, please pay attention to the PHP Chinese website!