CSS Learning--Selector

CSS3 on the basis of the original principle of the addition of many types of selectors, the following summarizes the CSS3 provided by the selector, as a review.

First, the basic selector

1. *: Wildcard selector, select all elements in the HTML document.

2. #idValue: ID Selector, select an element with ID idvalue.

3. Classvalue: Class selector, select the element with class Classvalue

4, E: Tag Selector, select all e elements

5, E, #idValue,. Classvalue: Group expression, select all elements of E element and ID Idvalue, class is classvalue element.

Second, hierarchical structure selector

1, E F: Descendant selector, select E as the parent element, and the F element in the descendant, such as:

1  <div>2         <p>3             <span> I was selected </span>4         </p>5      </div>67 Div span{} The span element in the DIV is selected

2. E>f: Sub-selector, select the element with E as the parent element and the child element F, note that only the child element of E is selected f,e the grandson element F is not selectable. Such as:

1 <div>2         <span> I'm a child element </span>3         <p>4             <span> I'm child element of child element </span>5         </p>6     </div>7 Div >span{} Selected is the content is I am the child element of span

3. E+f: Adjacent sibling selector, select F element with E at the same level, e.g.:

1 <div>2         <p> I'm a child element </p>3     </div>4     <p > I am a brother element </p>5  div  +p selected is the content for I am the brother element of P element

4, E~f: Universal selector, select all the sibling elements that follow the E, unlike the sibling principle, it selects only the following sibling elements, not the previous selection, such as:

1  <span> I am the front brother element </span>2     <div>3         <p><span> I am the child element of the child element </ Span> </p>4         <span> I am a child element </span>5     </div>6     <span> I'm behind the brothers element </span>78 Div ~span{} selected is the content for I am the back sibling element of the SPAN element

Third, attribute selector

1. [attr]: Select all elements with attr attribute

2. [Attr=value]: Select the element with the attr attribute and the value of the property

2. [Attr^=value]: Select the element that has the attr attribute and the attribute value begins with attr, such as:

1<divclass="Divfirst">class starting with Div </div>2<divclass="Divsecond">class starting with Div </div>3<divclass="three">class do not start with Div </div>4 5div[class^="Div"]{6 color:red;7         }8Match to the top two div

3. [Attr$=value]: Select the attr attribute and the value of the property ends with value. Such as:

1<divclass="Div">class ends with V </div>2<divclass="Div">class ends with V </div>3<divclass="three">class does not end with V </div>4 5div[class$="Div"]{6 color:red;7 }8Match to top two Div

4. [Attr*=value]: Select the element that has the attr attribute and the attribute value contains value, such as:

 1  <div class  ="  div   " ></div>< Span style= "COLOR: #008080" >2  <div class  =  " div   " ></div>3  <div class  ="  dthree  Span style= "COLOR: #800000" > " ></div>4  5  div[class  *=  " d   "] {} Select the element that contains d in the class attribute in the div element, and the above three div select the 

5. [Attr|=value]: Select the element that has the attr attribute and the attribute value begins with value, where value must be a complete word.

6. [Attr~=value]: Select the element that has the attr attribute and the value of the property that contains it, where value must be the complete word.

Iv. UI State Pseudo-class selector

1. e:checked: Matches the selected form element, such as the selected Radio box, check box.

2. e:enabled: Match all form elements that are enabled

3. e:disabled: Match disabled form elements

V. Target pseudo-class selector

1, E:target: Select the E element that is pointed to by the URL,

 1  <div id= " div1   " >111  </div> 2  <div id= " div2   " >222  </div> 3  <a href= "  #div1   " > Jump to 1</a>4  5  div:target{ 6   color:red;  7  }  8  When you click a hyperlink, the font color of the first div turns red. 

Vi. Dynamic Pseudo-class selector

1. E:link: Match elements that have been hyperlinked and have not been accessed

2. e:visited: Match the element that defines the hyperlink and the hyperlink is accessed

3. E:active: Match the active element

4. E:focus: Match the element that gets focus

5, E:hover: match the mouse on the above element

Vii. negation pseudo-class selector

1. E:not (f): Select all E elements that do not meet the F condition.

VIII. structure Pseudo-class selector

1. E:first-child: The first child element of the parent element that matches the e element is the e element of E, such as:

1 <div>2         <p>11111</p>3         <p>22222 </p>4         <p>33333</p>5         <p>44444</p >6         <p>555555</p>      7 </div>8 Pl:first-child matches the first P element, and if a SPAN element is preceded by the first P element, it cannot be matched to any element.

2. E:last-chilid: The last child element of the parent element that matches the e element is the e element of E,

1 <div>2         <p>11111</p>3         <p>22222 </p>4         <p>33333</p>5         <p>44444</p >6         <p>555555</p>      7 </div>8 P:lastt-child matches the last P element, and if a SPAN element is appended to the last P element, it cannot be matched to any element.

3. E:nth-child (n): A child element in the nth position that matches the parent element of E, if the nth child element is E, the match succeeds, or the match fails.

4, E:nth-last-child: matches the parent element of E from the subsequent number of the nth child element, if the nth child element is E, then the match succeeds, otherwise the match fails.

5. E:only-child: There is only one child element in the parent element that matches E, and the child element is the e element of E.

6. E:root: Matches the root element of the document where element E resides.

7, E:nth-of-type (n): Match element E in the parent element of the nth e element, unlike E:nth-chilid, when calculating N, Nth-chilid is to all the child elements in the inside, and Nth-of-type only the elements of the child element E.

8, E:nth-of-last-type (n): the nth e element from the last count in the parent element of the matching element e

9. E:first-of-type: Matches the first child element e in the parent element of element E.

10. E:last-of-child: Matches the last child element E in the parent element of element E.

11. E:only-of-type: The e element of the parent element that matches E has only one e child element, and unlike E:only-child, there is only one child element in the Only-child, and the only-of-type can have more child elements, but only one child element E.

12. E:empty: Select the E element without any child elements.

CSS Learning--Selector