CSS3 Basics (1)-Selector details

CSS3 Selector Detailed

One, the attribute selector

In CSS3, three attribute selectors were appended: [Att*=val], [Att^=val], and [Att$=val], so that the property selector has the concept of a wildcard character.

Selector Selector	Example	Describe
[Attribute^=value]	[src^= "https"]	Select the element with the value of each SRC attribute beginning with "https"
[Attribute$=value]	[src$= ". pdf"]	Select the element that ends with a ". pdf" value for each SRC attribute
[Attribute*=value]	[src*= "Runoob"]	Select the value of each SRC attribute that contains the element of the substring "Runoob"

Example:

Code	Description
div[class^= "Test"]{background: #ffff00;}	Sets the background color of all DIV elements with the class property value beginning with "Test"
[class^= "Test"] {background: #ffff00;}	Sets the background color of all elements with the class property value beginning with "Test"
div[class$= "Test"]{background: #ffff00;}	Sets the background color of all DIV elements with the class property value ending with "test"
[class$= "Test"] {background: #ffff00;}	Sets the background color of all elements with the class property value ending with "test"
div[class*= "Test"]{background: #ffff00;}	Sets the background color of all DIV elements that have a class property value that contains "test"
[class*= "Test"] {background: #ffff00;}	Sets the background color of all elements of the class property value that contain "test"

Second, structural pseudo-class selector (i.)

Selector Selector	Example	Describe
Structural pseudo-Element selectors
: First-letter	P:first-letter	Select the first letter of each <P> element
: First-line	P:first-line	Select the first line of each <P> element
: Before	P:before	Insert content before each <p> element
: After	P:after	Insert content after each <p> element
Structural pseudo-Class selectors: Common feature is to allow developers to eradicate the structure in the document to specify the style of the element
: Root	: Root	Select the root element of the document
: Not (selector)	: Not (P)	Select each element that is not a P element
: Empty	P:empty	Select each P element without any children (including text nodes)
: Target	#news: Target	Select the currently active #news element (the URL of the click that contains the anchor name)

① Insert content after each <p> element: p:after{Content: "-Remember This";}

② setting the background color of an HTML document: : root{background: #ff0000;}

: The root selector matches the root element of the document, and in HTML it is always an HTML element.

③ sets the background color for each element that is not a <p> element: : Not (p) {background: #ff0000;}

④ Specifies the background color of the empty P element: p:empty {background: #ff0000;}

: The empty selector selects each element without any children (including text nodes).

The ⑤:target selector can be used for the style of the currently active target element and can only be identified with an ID

1 <! DOCTYPE html> 2 
Third, structural pseudo-class selector (ii)

 
 

  
  
 
   
 
    
Selector Selector
 
    
Example
 
    
Describe
 
   
 
   
 
    
: First-child
 
    
P:first-child
 
    
Specifies a style only if the <p> element is the first child of its parent.
 
   
 
   
 
    
: Last-child
 
    
P:last-child
 
    
Select each P-element to be the last child of its parent.
 
   
 
   
 
    
: Nth-child (N)
 
    
P:nth-child (2)
 
    
Select each P-element is the second child of its parent
 
   
 
   
 
    
: Nth-last-child (N)
 
    
P:nth-last-child (2)
 
    
Select the second child element of each P-element that is its parent, counting from the last subkey
 
   
 
   
 
    
: Nth-of-type (N)
 
    
P:nth-of-type (2)
 
    
Select each P element is the second P element of its parent
 
   
 
   
 
    
: Nth-last-of-type (N)
 
    
P:nth-last-of-type (2)
 
    
Select the second P element for each P element that is its parent, counting from the last subkey
 
   
 
  
 
 
① Specifies the background color of the last P element in the parent element: p:last-child{background: #ff0000;}
② specifies that each P element matches the 2nd sibling element in the same type in the background color: p:nth-last-child (2) {background: #ff0000;}
③:the Nth-child (n) selector matches the nth child element in the parent element, andn can be a number, a keyword (an odd even keyword), or a formula. The first child node of the index is 1.
④:the Nth-of-type (n) selector matches the nth sibling element in the same type, n can be a number, a keyword, or a formula. The first child node of the index is 1.
P:nth-of-type (odd) {background: #ff0000;}
P:nth-of-type (even) {background: #0000ff;}
⑤ Use formula (an+ B). Description: A represents the size of a loop, N is a counter (starting at 0), and B is the offset. Here we specify the background color for p elements where all indexes are multiples of 3: P:nth-child (3n+0) {background: #ff0000;}
⑥:The Only-child matches the element that belongs to the unique child element in the parent element. p:only-child{background: #ff0000;}
Iv. UI element Status pseudo Selector
In the CSS3 selector, there is a UI element state pseudo-class selector in addition to the structural pseudo-class selector. The common feature of such selectors is that the specified style works only when the element is in a certain state and does not work in the default state. In CSS3, there are 17 types of UI element State pseudo-class selectors.

 
 

  
  
 
   
 
    
Selector Selector
 
    
Example
 
    
Describe
 
   
 
   
 
    
: Link
 
    
A:link
 
    
Select All not visited links
 
   
 
   
 
    
: Active
 
    
A:active
 
    
Select Active link
 
   
 
   
 
    
: hover
 
    
A:hover
 
    
Select mouse over link
 
   
 
   
 
    
: Focus
 
    
Input:focus
 
    
Select the input element with focus (selected)
 
   
 
   
 
    
: Checked
 
    
Input:checked
 
    
Select each selected INPUT element
 
   
 
  
 
 
①:hover The special style that is added when you move the mouse over the link.
Tip: : The hover selector is available for all elements, not just links.
tip: The link selector sets a page link style that has not been visited: the visited selector sets the style of the page link that was visited: the active selector sets the style when you click the link.
Note: in order to produce the desired effect, in the CSS definition: hover must be located at: Link and: Visited!
②:The focus selector is used to select the element with focus.
Tip: : The focus selector accepts keyboard events or other user input elements.
The style selected when an input field gets focus: Input:focus{background-color:yellow;}
1 
③:The checked selector matches each selected INPUT element (only applies to radio buttons or check boxes).
Sets the background color for all selected input elements: input:checked {height:50px; width:50px;}
 1 
 
   
 
  
    
 
     
 
      
 
 selector 
 
 
      
 
 Example 
 
 
      
 
 Description 
 
 
     
 
     
 
      
 
: Enabled 
 
 
      
 
 input:enabled 
 
 
      
 
 Select each enabled INPUT element 
 
 
     
 
     
 
      
 
:d isabled 
 
 
      
 
 input:disabled 
 
 
      
 
 Select each disabled INPUT element 
 
 
     
 
    
 
 
   
 1 <! DOCTYPE html> 2 
V. Universal sibling Element selector:
It is used to specify the style used by all other sibling elements of a certain kind after an element in one parent element.
For example: Sub P element under the same div, with "~" Connection, div ~ p{background-color:gold}
CSS3 Basics (1)-Selector details