CSS selector notes, css Selector

CSS selector notes, css Selector
I. Element Selector

Serial number	Selector	Description
1.	*	Common Element selector, matching any element
2.	E	Tag selector that matches all elements using the E tag
3.	. Info	The class selector matches all elements in the class attribute that contain info.
4.	# Footer	Id selector, matching all elements whose id attribute is equal to footer

1 .*

* {  margin: 0;  padding: 0;}

Before we look at the more advanced selector, we should understand this well-known clearing selector. The asterisk Selects all elements on the page. Many developers use it to clear 'margin 'and 'padding '. Of course, it is okay to use it during practice, but I do not recommend using it in the production environment. It adds unnecessary things to the browser.
'*' Can also be used to select all child elements of an element.

#container * {  border: 1px solid black;}

It selects all elements under '# iner.

2. E

a { color: red; }ul { margin-left: 0; }

If you want to locate all the tags on the page, instead of using 'id' or 'class', use the tag selector directly.

3.. info

.error {  color: red;}

This is a 'class' selector. Unlike the 'id' selector, it can locate multiple elements. You can use 'class' when you want to style multiple elements '. If you want to modify a specific element, you can use 'id' to locate it.

4. # footer

#container {   width: 960px;   margin: auto;}

You can use '#' in the selector to locate an element with id.

2. Multi-element combination Selector

Serial number	Selector	Description
5.	E, F	Multi-element selector that matches all Eelements or F elements simultaneously. Separate E and F with commas (,).
6.	E F	Descendant element selector, which matches all F elements belonging to the descendant of the Eelement. E and F are separated by spaces.
7.	E> F	Child element selector, matching the child element F of all eElements
8.	E + F	Adjacent element selector, matching all elements of the same level after the E element F
9.	E ~ F	Matches any F element at the same level after the Eelement

5. E, F

a,li { color: red; }

Match All elements a and li

6. E F

li a {  text-decoration: none;}

Only match the multiple a elements behind li (including grandchildren)

7. E> F

div#container > ul {  border: 1px solid black;}

Only matching the multiple a elements (not including grandchildren) after li is the difference between 'e F' and 'e> f' is that the subsequent command selects its direct child element. See the following example:

 1 <div id="container"> 2 <ul> 3     <li> List Item</li> 4     <ul> 5         <li> Child </li> 6     </ul> 7     <li> List Item </li> 8     <li> List Item </li> 9     <li> List Item </li>10 </ul>11 </div>

'# Container> U' only selects all direct 'U' elements under 'div' with 'id' as 'Container. It does not locate the 'ul 'element under the first 'lil.

8. E + F

ul + p {   color: red;}

This is called an adjacent selector. It directs the direct successor element of the specified element. In the example above, the first section of all 'ul 'labels is selected and their colors are set to red.

9. E ~ F

ul ~ p {  color: red;}

The 'ul + P' selector selects only those elements next to the specified element. This selector Selects all matching elements following the target element.

Iii. Relationship Selector

Serial number	Selector	Description
10.	E [att]	Matches all the eElements with the att attribute, regardless of its value. (Note: E can be omitted here, for example, "[cheacked]". .)
11.	E [att = val]	Matches all the eElements whose att attributes are equal to "val ".
12.	E [att ~ = Val]	Matches all att attributes with values separated by spaces, and an Eelement whose values are equal to "val"
13.	E [att | = val]	An Eelement that matches all att attributes and whose attribute values start with val and are separated by the connector.
14.	E [att ^ = "val"]	Matches all elements whose att attributes start with "val ".
15.	E [att $ = "val"]	Matches all elements whose att attributes end with "val ".
16.	E [att * = "val"]	Matches all elements whose att attributes contain the "val" string.

10. E [att]

Matches all the eElements with the att attribute, regardless of its value.

1 <style> 2 a [class] {color: # f00 ;} 3 </style> 4 
In the above example, only elements with class attributes will be selected. Those without this attribute will not be modified by this Code.
11. E [att = val]
Matches all the eElements whose att attributes are equal to "val ".
a[class="external"]{color:#f00;}
The above Code sets the label with the 'class' attribute value as 'external 'to red, while other labels are not affected.
12. E [att ~ = Val]
Matches all att attributes with values separated by spaces, and an Eelement whose values are equal to "val"
<Style> a [class ~ = "External"] {color: # f00 ;}</style> 
This '~ The 'symbol can be used to locate tags whose property values are separated by spaces (therefore, only external links are in red ).
13. E [att | = val]
Select an Eelement of a string that has the att attribute and the attribute value starts with val and is separated by the connector.
1 <style> 2 li [class | = "test3"] {color: # f00 ;} 3 </style> 4 
Therefore, only project 3 is red.
14. E [att ^ = "val"] Select an Eelement with the att attribute and the attribute value is a string starting with val.
1 <body> 2 <ul> 3 <li class = "abc"> list project 1 </li> 4 <li class = "acb"> list project 2 </li> 5 <li class = "bac"> list project 3 </li> 6 <li class = "bca"> list project 4 </li> 7 <li class = "cab"> list Project 5 </li> 8 <li class = "CBA"> list Project 6 </li> 9 </ul> 10 </body>
li[class^="a"]{color:#f00;}
Select the E element of the string that has the class attribute and the attribute value starts with a (so only project 1 and project 2 are red ).
15. E [att $ = "val"]
Matches all elements whose att attributes end with "val ".
li[class$="a"]{color:#f00;}
Select the E element of a string with the class attribute and the attribute value ending with a (item 4 and 6 are in red ).
16. E [att * = "val"]
Matches all elements whose att attributes contain the "val" string.
li[class*="a"]{color:#f00;}
Because the class attribute contains the letter a, the result is red.
4. Pseudo-class selector

   

 
    
 
     
 
      
17.
 
      
E: link
 
      
Match All unclicked links
 
     
 
     
 
      
18.
 
      
E: visited
 
      
Match all clicked links
 
     
 
     
 
      
19.
 
      
E: hover
 
      
Matching the Eelement on which the mouse is hovering
 
     
 
     
 
      
20.
 
      
E: active
 
      
Match the Eelement that has been pressed and not released by the mouse
 
     
 
     
 
      
21.
 
      
E: first-child
 
      
Matching the first child element E of the parent Element
 
     
 
     
 
      
22.
 
      
E: last-child
 
      
Matching the last child element E of the parent Element
 
     
 
     
 
      
23.
 
      
E: only-child
 
      
Matches only one child element E of the parent element.
 
     
 
     
 
      
24.
 
      
E: nth-child (n)
 
      
Matching the nth child element E of the parent Element
 
     
 
     
 
      
25.
 
      
E: nth-last-child (n)
 
      
Matches the nth child element E of the parent Element
 
     
 
     
 
      
26.
 
      
E: first-of-type
 
      
Matches the first sibling Element E of the same type.
 
     
 
     
 
      
27.
 
      
E: last-of-type
 
      
Matches the last sibling Element E of the same type.
 
     
 
     
 
      
28.
 
      
E: only-of-type
 
      
Matches the unique sibling Element E of the same type.
 
     
 
     
 
      
29.
 
      
E: nth-of-type (n)
 
      
Matches the nth sibling Element E of the same type
 
     
 
     
 
      
30.
 
      
E: nth-last-of-type (n)
 
      
Matches the nth sibling Element E in the same type
 
     
 
    

   
17.
E: link
Set the style of Hyperlink a before being accessed.
1 <ul> 2 <li> <a href = "? "Class =" external "> external links </a> </li> 3 <li> <a href = "? "> Internal link </a> </li> 4 <li> <a href = "? "Class =" external "> external links </a> </li> 5 <li> <a href = "? "> Internal link </a> </li> 6 </ul>
a:link{color:#03c;}.external:link{color:#f00;}
Running result: the external link is red, and the internal link is blue.
18.
E: visited
Set the style of Hyperlink a when its link address has been accessed.
19.
E: hover
Sets the style of an element when it is hovering over it.
20.
E: active
Set the style of the element when it is activated by the user (events occur between mouse clicks and release.
21.
E: first-child
Matches the first child element E of the parent element.
1 <body>2 <ul>3     <li>test1</li>4     <li>test2</li>5     <li>test3</li>6     <li>test4</li>7     <li>test5</li>8 </ul>9 </body>
li:first-child{color:#f00;}
Only the first information in the list, test1, is red.
22.
E: last-child
Matches the last child element E of the parent element.
li:last-child{color:#f00;}
The result is red only when test5 is the last information in the list.
23.
E: only-child
Matches only one child element E of the parent element.
1 <ul>2     <li>test1</li>3 </ul>4 <ul>5    <li>test2</li>6     <li>test3</li>7     <li>test4</li>8 </ul>
li:only-child{color:#f00;}
The result is red only when test1 is in the list.
24.
E: nth-child (n)
Matches the nth child element E of the parent element.
li:nth-child(3){color:#f00;}
The result is red only when test3 is in the list.
25. E: nth-last-child (n)
Matches the nth child E of the parent element.
li:nth-last-child(3){color:#f00;}
The result is red only when test3 is in the list.
26. E: first-of-type
Matches the first sibling Element E of the same type.
1 <div class = "test"> 2 <div> <B> I am a div element </B> </div> 3 <p> This is section 1 </p> 4 <p> This is section 2 </p> 5 <p> This is section 3 </p> 6 <p> This is section 4 </p> 7 <p> This is section 5 </p> 8 </div>
p:first-of-type{color:#f00;}
Only section 1 is red.
27. E: last-of-type
Matches the last sibling Element E of the same type.
p:last-of-type{color:#f00;}
The result is red only for section 5.
28. E: only-of-type
Matches the unique sibling Element E of the same type.
b:only-of-type{color:f00;}
Only one div element is red.
29. E: nth-of-type (n)
Matches the nth sibling Element E of the same type. n can represent numbers or letters.
p:nth-of-type(2){color:#f00;}
Only section 2 is red.
When n is an odd, it indicates an odd number; if n is an even, it indicates an even number;
p:nth-of-type(odd){color:#f00;}
Result: paragraphs 1, 3, and 5 are displayed in red.
p:nth-of-type(even){color:#f00;}
Result: paragraphs 2 and 4 are displayed in red.
30. E: nth-last-of-type (n)
Matches the nth sibling Element E in the same type. n can represent numbers or letters ..
p:nth-last-of-type(2){color:#f00;}
Result: section 4 is displayed in red.
When n is an odd, it indicates an odd number; if n is an even, it indicates an even number;
p:nth-last-of-type(odd){color:#f00;}
Result: paragraphs 1, 3, and 5 are displayed in red.
p:nth-last-of-type(even){color:#f00;}
Result: paragraphs 2 and 4 are displayed in red.