Primary selector

1 * Wildcard selector

This selector matches all elements on the page and is generally used to clear the browser’s default styles.

	*{margin:0; padding:0}
Copy the code

2. Element selector

Elements are selected by tag name.

	div{color:red}
Copy the code

Class selector

Class selectors/class selectors/name elements with class attributes, which can appear many times on a page

.box{width:100px; height:100px; }Copy the code

4. Id selector

It is named after the ID attribute, which appears only once on the page, is unique, and has the highest weight

#box{width:100px; height:100px; }Copy the code

Advanced selector

1, E F descendant selector

Matches all F elements (including children and grandchildren) below E, separated by a space.

div ul li {width:100px; height:100px; } <div> <ul> <li></li> <li></li> </li> </ul> </div>Copy the code

2, E,F multi-element selector

Both E and F elements are matched, separated by commas.

<! Matches both the div tag and the p tag with id box as shown below. --> div,#box{width:100px; height:100px; background:#000; } <div></div> <p id="box"></p>Copy the code

3, E>F child element selector

Select the immediate descendant F to E, only the descendant.

ul>li{width:100px; height:100px;}
<ul>
  <li><br> 　</li>
</ul>
Copy the code

4, E+F (adjacent selector) adjacent sibling selector

The sibling element F immediately after E, the adjacent sibling selector, has the same parent.

<! The last one does not satisfy the condition immediately following the div element. --> div+.box{width:100px; height:100px; background:pink; } < div > < / div > < p class = "box" > < / p > < p class = "box" > < / p > < div > < / div > < p > < / p > < p class = "box" > < / p > <! You can select all the elements below except the first p element. --> div p + p{ width:100px; height:100px; margin-top:2px; background:pink; } <div> <p></p> <p></p> <p></p> <p></p> </p> </div>Copy the code

Advanced selector property selector

1. E[attr] matches E elements with attr attributes

<! Match the first and third div elements below because they contain the title attribute. --> div[title]{ width:100px; height:100px; margin-top:2px; background:pink; } < div title = "width" > < / div > < div > < / div > < div title = "height" > < / div >Copy the code

2, E[attr=val] matches E elements that have attr attributes and only val values.

<! Matches the third div element below. --> div[title="height"]{ width:100px; height:100px; margin-top:2px; background:pink; <br>} <div title="width"></div> <div></div> <div title="height"></div>Copy the code

3, E[attr~=val] matches the attribute value attr and contains the E element of this value, used to select the element containing the specified term.

<! Select the first and second div elements below. --> div[class~="c1"]{ width:100px; height:100px; margin-top:2px; background:pink; } < div class = "c1" > < / div > < div class = "c1 c2" > < / div > < div class = "c2c1" > < / div >Copy the code

4, E [attr | = val] match all attributes for the attr, value of val or begin with var – E element

<! Select the first and third elements below. --> div[class|="c1"]{ width:100px; height:100px; margin-top:2px; background:pink; } < div class = "c1" > < / div > < div class = "c1cs" > < / div > < div class = "c1 and c2" > < / div >Copy the code

Eattr matches all E elements that have the attr1 attribute, attr2 attribute, and attr2 value val. This is to write several attribute selectors, all of which satisfy their conditions.

<! Select the first div element below. --> div[title="width"][class]{ width:100px; height:100px; margin-top:2px; background:pink; } <div title="width" class="box"></div> <div title="width"></div>Copy the code

A pseudo-class selector

1, :link matches all unclicked links

	a:link{ color: green; }
Copy the code

2, : hover matches the element over which the mouse hovers

	a:hover{ color: gold; }
Copy the code

3, : active matches elements that have not been released by the mouse press

	a:hover{ color: blue; }
Copy the code

4, : visited Matches all links that have already been clicked

a:hover{ color: red; } <! The use of hover, just a selector, must be his descendants. -- > <! The color of the p font changes when the mouse moves over the div. --> .box{ width:100px; height: 100px; color:#fff; background: #000; } < br >. Box: hover p {color: red; } <div class="box"> <p>Copy the code
  1. A pseudo-element selector

1> : before in element

<! Insert this at the beginning of all the elements of the div. Div :before{content: "before inserted element "; } < div > < p > this is p < / p > < ul > < li > < / li > < li > < / li > < li > < / li > < / ul > < / div >Copy the code

2> :after Inserts content after the element, after the last child element.

<! -. --> div:after{content:""; } <div></div>Copy the code

CSS3 new selector

Associative selector

E1 to E2 (select sibling E2 after E1)

<! Div ~p{width:100px; height: 100px; margin-top: 2px; background: #000; } <div></div> <p></p> <p></p> <p></p>Copy the code

Property selector added

1, [attr ^ = “.. “] In order to… Initial element

<! Div [class^="de"]{width:100px; height: 100px; margin-top: 2px; background: #000; } <div class="de1"></div> <div class="de"></div> <div class="dedkjsfkld"></div> <div class="1fde"></div>Copy the code

[attr$=”… “] Closing element

<! Div [class$="de"]{width:100px; height: 100px; margin-top: 2px; background: #000; De1de} < div class = "" > < / div > < div class =" DE "> < / div > < div class =" dedkjsfklde "> < / div > < div class =" 1 f "> < / div >Copy the code

3, [attr*=””] select the element containing the value

<! Div [class*="de"]{width:100px; height: 100px; margin-top: 2px; background: #000; De1de} < div class = "" > < / div > < div class =" DE "> < / div > < div class =" DLD clutches "> < / div > < div class =" 1 def "> < / div >Copy the code

7, pseudo-class new selector below all use P for example, the other same

1, :first-of-type select p from p element

<! --> p:first-of-type{width:100px; height:100px; background: #000; } <div> <p></p> <p></p> <p></p> <p></p> <p></p> </div>Copy the code

2, : last – of – type

<! --> p:last-of-type {width:100px; height:100px; background: #000; } <div> <p></p> <p></p> <p></p> <p></p> <p></p> </div>Copy the code

3, the only – of – type

<! There is only one p element below the parent. The other elements cannot be p. If there are other elements, they will not be selected. --> p:only-of-type{ width:100px; height: 100px; margin-top: 2px; background: #000; } < div > < p > < / p > < p > < / p > < p > < / p > < p > < / p > < p > < / p > < / div >Copy the code

4, the NTH – of – type

<! P --> p:nth-child(n)Copy the code

5, : the NTH – last – of – type (n)

<! -- select p from parent element --> : nth-last-of-type(n)Copy the code

The ones that don’t have “of” are the ones that select the child elements

6: only – child

###### p:only-child select p, p must be the only child of their respective parent <! P --> p:only-child{width:100px; height: 100px; background: #000; } < br > < div > < p > < / p > < / div > < div > < p > < / p > < span > < / span > < / div > < div > < p > < / p > < p > < / p > < p > < / p > < / div >Copy the code

7, the last – the child

<! -- select p, p must be the last child of the parent --> p:last-childCopy the code

other

1, : not (.c1) select class

<! All of the following elements are selected except for the first p element whose class is c1. --> p:not(.c1){ width:100px; height: 100px; margin-top: 2px; background: #000; < br >} < div > < p class = "c1" > < / p > < p class = "c2" > < / p > < p id = "box" > < / p > < p > < / p > < p > < / p > < / div >Copy the code

2. :empty Selects the specified element whose inverted label content is empty

<! P :empty{width:100px; height: 100px; margin-top: 2px; background: #000; } <div> <p>11</p> <p></p> <p>11</p> <p>11</p> <p>1</p> </div>Copy the code

3. P :target selects the p currently activated by the anchor point

<! --> p:target{width:100px; height: 100px; margin-top: 2px; color:#fff; background: #000; } < a href = "# a1" > me < / a > < div > < / div > < p id = "a1" > the content of the p tag < / p >Copy the code

4. : : selection p selected by the user

<! --> p::selection{width:100px; height: 100px; margin-top: 2px; color:#fff; background: #000; } <p>111</p> <p>222</p> <p>333</p> <p>444</p> <p>555</p>Copy the code

5. Input :disable Select the input box that cannot be operated

<! -- -->Copy the code

6. Input: enable Select the input box that can be operated

<! --> INPUT :enabled{background:yellow; } input:disabled{ background:red; } <input type="text" value=""> <input type="text"> <input type="text" disabled="diabled">Copy the code

7. Input: Checked to the checked input

<! --> Input :checked{width:40px; height:40px; } <input type="checkbox" checked="" value=""> Football <input type="checkbox" value=""> basketballCopy the code