CSS Selector notes

One, Element selector

1. *

* {  margin:0;  padding:0;}

Before we look at the more advanced selectors, we should recognize this well-known purge selector. The asterisk will select every element on the page. Many developers use it to empty ' margin ' and ' padding '. Of course it's okay to use this while you're practicing, but I don't recommend using it in a production environment. It will add a lot of unnecessary things to the browser.
' * ' can also be used to select all child elements of an element.

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

It will select all the elements under ' #container '.

2. E

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

If you want to locate all of the tabs on the page, do not use the tag Selector directly by ' ID ' or ' class '.

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 decorate multiple elements with a style. When you want to decorate a particular element, you use ' ID ' to locate it.

4. #footer

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

Use ' # ' in the selector to locate an element with an ID.

Two, multi-element combination Selector

5. E,f

A,li {color:red;}

Matches all elements of A and Li

6. E F

Li a {  text-decoration:none;}

Matches only the A element (including grandchildren) behind Li

7. E > F

Div#container > UL {  border:1px solid black;}

The difference between ' e F ' and ' e > F ' that matches only a number of elements behind Li (not including grandchildren) is the direct sub-element that the command chooses. Look at the following example:

 
  
  
    
  
   
   
List Item
    
  
   
   
 
    
 
   
    
  
   
   
    
  
   
   
    
  
   
   

 
  
  

' #container > UL ' will only select ' ID ' for ' container ' under ' div ' for all direct ' UL ' elements. It does not locate the ' UL ' element under the first ' Li '.

8. E + F

UL + p {   color:red;}

This is called the adjacent selector. It directs the selection of the immediate successor element of the specified element. The above example selects the first paragraph after all the ' UL ' tags and sets their color to red.

9. E~f

UL ~ p {  color:red;}

The ' UL + P ' selector selects only those elements that follow the specified element. This selector selects all matching elements that follow the target element.

Third, relationship selector

Ten. E[att]

Matches all e elements that have the ATT attribute, regardless of its value.

 
  
  
    
  
   
   
External links
    
  
   
   
Internal links
    
  
   
   
External links
    
  
   
   
Internal links
 
  
  

In this example above, only the element with the class attribute is selected. Those without this attribute will not be decorated with this code.

One. E[att=val]

Matches the e element of all ATT attributes equal to "Val"

a[class= "external"]{color: #f00;}

The above code will set the ' class ' property value to ' external ' to red, while the other labels are not affected.

E[att~=val]

Match all ATT properties with multiple space-delimited values, where one value equals "Val" of the E element

 
  
  
    
  
   
   
External links
    
  
   
   
Internal links
    
  
   
   
External links
    
  
   
   
Internal links
 
  
  

This ' ~ ' symbol can be used to locate a label whose attribute value is a space-delimited multi-value (so only the external link is a red font).

E[att|=val]

Select the e element with the ATT attribute and the attribute value to begin with Val and the string delimited by the connector "-".

 
  
  
    
  
   
   
List Item 1
    
  
   
   
List Item 2
    
  
   
   
List Item 3
    
  
   
   
List Item 4
    
  
   
   
List Item 5
    
  
   
   
List Item 6
 
  
  

So only item 3 is red.

E[att^= "Val"]

Select the E element that has the ATT attribute and the property value is a string that begins with Val.

 
  
  
    
  
   
   
List Item 1
    
  
   
   
List Item 2
    
  
   
   
List Item 3
    
  
   
   
List Item 4
    
  
   
   
List Item 5
    
  
   
   
List Item 6
 
  
  

Li[class^= "A"]{color: #f00;}

Select the e element with the class attribute with a string that starts with a property value (so only item 1, 2 is red).

E[att$= "Val"]

Match all att attributes with "Val"-terminated elements

Li[class$= "A"]{color: #f00;}

Select the e element with the class attribute and the property value as a string ending with a (item 4, 6 is red).

E[att*= "Val"]

Match all ATT attribute elements that contain the "Val" string

Li[class*= "A"]{color: #f00;}

Because the class attribute contains the letter A, the results are all red.

Four, pseudo-class selector

E:link.

Sets the style of hyperlink a before it is accessed.

 
  
  
    
  
   
   
External links
    
  
   
   
Internal links
    
  
   
   
External links
    
  
   
   
Internal links
 
  
  

A:link{color: #03c;}. External:link{color: #f00;}

Run Result: external link is red; internal link is blue

E:visited.

Sets the style of hyperlink A in which the link address has been accessed out of date.

E:hover.

Sets the style of the element when it hovers over it.

E:active.

Sets the style of an element when it is activated by the user (an event that occurs between mouse clicks and releases).

E:first-child.

Matches the first child element of the parent element, E.

 
  
  
    
  
   
   
Test1
    
  
   
   
Test2
    
  
   
   
Test3
    
  
   
   
Test4
    
  
   
   
Test5
 
  
  

Li:first-child{color: #f00;}

Results only the first message in the list is test1 red

E:last-child.

Matches the last child element of the parent element, E.

Li:last-child{color: #f00;}

Results only the last message in the list is TEST5 red

E:only-child.

Matches only one child element of the parent element, E.

 
  
  
    
  
   
   
Test1
 
  
  
 
  
  
   
  
   
   
Test2
    
  
   
   
Test3
    
  
   
   
Test4
 
  
  

Li:only-child{color: #f00;}

Results only list test1 is red

E:nth-child (N)

Matches the nth child element e of the parent element.

Li:nth-child (3) {color: #f00;}

Results only list test3 is red

E:nth-last-child (N)

Matches the inverse nth child element e of the parent element.

Li:nth-last-child (3) {color: #f00;}

Results only list test3 is red

E:first-of-type.

Matches the first sibling element in the same type, E.

    I am a DIV element    
This is paragraph 1.
    
This is paragraph 2.
    
This is paragraph 3.
    
This is paragraph 4.
    
This is paragraph 5.

P:first-of-type{color: #f00;}

The result is only that paragraph 1 is red.

E:last-of-type.

Matches the last sibling element in the same type, E.

P:last-of-type{color: #f00;}

The result is only that paragraph 5 is red.

E:only-of-type.

Matches only one sibling element of the same type, E.

B:ONLY-OF-TYPE{COLOR:F00;}

The result is only I am a DIV element for red.

E:nth-of-type (N)

Matches the nth sibling element in the same type e,n can represent a number and can represent a letter.

P:nth-of-type (2) {color: #f00;}

The result is only that paragraph 2 is red.

n is an odd number for odd, n is even for even;

P:nth-of-type (odd) {color: #f00;}

Results: Paragraphs 1, 3, and 5 are shown in red.

P:nth-of-type (even) {color: #f00;}

Results: Paragraphs 2 and 4 are shown in red.

E:nth-last-of-type (N)

Matches the reciprocal nth sibling element of the same type e,n can represent a number or a letter.

P:nth-last-of-type (2) {color: #f00;}

Result: Paragraph 4 is shown in red.

n is an odd number for odd, n is even for even;

P:nth-last-of-type (odd) {color: #f00;}

Results: Paragraphs 1, 3, and 5 are shown in red.

P:nth-last-of-type (even) {color: #f00;}

Results: Paragraphs 2 and 4 are shown in red.

