CSS3 BASICS (1) -- selector details, css3 Selector

CSS3 BASICS (1) -- selector details, css3 Selector

Detailed description of CSS3 Selector

I. Attribute Selector

In CSS3, three attribute selectors are appended: [att * = val], [att ^ = val], and [att $ = val]. this gives the attribute selector the concept of wildcard.

Selector	Example	Description
[Attribute ^ = value]	[Src ^ = "https"]	Select an element whose src attribute value starts with "https"
[Attribute $ = value]	[Src $ = ". pdf"]	Select the elements whose values of each src attribute end with ". pdf"
[Attribute * = value]	[Src * = "runoob"]	Select the element whose value of each src attribute contains the sub-string "runoob"

Example:

Code	Description
Div [class ^ = "test"] {background: # ffff00 ;}	Set the background color of all div elements whose class attribute value starts with "test"
[Class ^ = "test"] {background: # ffff00 ;}	Set the background color of all elements whose class attribute value starts with "test"
Div [class $ = "test"] {background: # ffff00 ;}	Set the background color of all div elements whose class property value ends with "test"
[Class $ = "test"] {background: # ffff00 ;}	Set the background color of all elements whose class attribute values end with "test"
Div [class * = "test"] {background: # ffff00 ;}	Set the background color of all div elements whose class attribute values contain "test"
[Class * = "test"] {background: # ffff00 ;}	Set the background color of all elements whose class attribute values contain "test ".

2. structural pseudo-class selector (1)

Selector	Example	Description
Structured pseudo element Selector
: 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 selector: a common feature allows developers to specify the style of elements based on the structure in the document.
: Root	: Root	Select the document root element
: Not (selector)	: Not (p)	Select an element that is not a p element
: Empty	P: empty	Select each p element without any child level (including text nodes)
: Target	# News: target	Select the # news element of the current activity (the URL of the click that contains the anchor name)

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

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

: The root selector matches the document's root element. In HTML, the root element is always an HTML element.

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

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

: Empty selector selects each element without any child level (including text nodes ).

⑤: The target selector can be used for the style of the target element of the current activity and can only be identified by id

1 <! DOCTYPE html> 2 
Iii. Structure pseudo-class selector (2)

 

 
  
 
   
 
    
Selector
 
    
Example
 
    
Description
 
   
 
   
 
    
: First-child
 
    
P: first-child
 
    
Specifies that only the <p> element is the first child style of its parent.
 
   
 
   
 
    
: Last-child
 
    
P: last-child
 
    
Select each p element as the last child of its parent.
 
   
 
   
 
    
: Nth-child (n)
 
    
P: nth-child (2)
 
    
Select each p element as the second child element of its parent.
 
   
 
   
 
    
: Nth-last-child (n)
 
    
P: nth-last-child (2)
 
    
Select the second child element of the parent level for each p element and count it from the last child item.
 
   
 
   
 
    
: Nth-of-type (n)
 
    
P: nth-of-type (2)
 
    
Select the second p element whose parent is each p element.
 
   
 
   
 
    
: Nth-last-of-type (n)
 
    
P: nth-last-of-type (2)
 
    
Select the second p element of the parent level for each p element and count it from the last subitem.
 
   
 
  

 
① Specify the background color of the last p element in the parent element: p: last-child {background: # ff0000 ;}
② Specify that each p element matches the background color of the last 2nd siblings of the same type: p: nth-last-child (2) {background: # ff0000 ;}
③:The nth-child (n) selector matches the nth child element in the parent element,NIt can be a number, a keyword (such as parity), or a formula. The first subnode of the index is 1.
④:The nth-of-type (n) selector matches the nth sibling element of the same type. n can be a number, a keyword, or a formula. The first subnode of the index is 1.
P: nth-of-type (odd) {background: # ff0000 ;}
P: nth-of-type (even) {background: # 0000ff ;}
⑤ Use the formula (an + B). Description: a represents the size of a loop, N is a counter (starting from 0), and B is the offset. Here, we specify the background color for all p elements whose indexes are multiples of 3: p: nth-child (3n + 0) {background: # ff0000 ;}
⑥:The only-child selector matches the unique child element in the parent element. P: only-child {background: # ff0000 ;}
Iv. UI element state pseudo Selector
In the CSS3 selector, apart from the structural pseudo-class selector, there is also a pseudo-class selector for the UI element state. The common feature of this type of selector is that the specified style takes effect only when the element is in a certain state and does not take effect by default. In CSS3, there are 17 UI element state pseudo class selectors.

 

 
  
 
   
 
    
Selector
 
    
Example
 
    
Description
 
   
 
   
 
    
: Link
 
    
A: link
 
    
Select All unaccessed links
 
   
 
   
 
    
: Active
 
    
A: active
 
    
Select activity Link
 
   
 
   
 
    
: Hover
 
    
A: hover
 
    
When you select mouse over the link
 
   
 
   
 
    
: Focus
 
    
Input: focus
 
    
Select an input element with focus (selected)
 
   
 
   
 
    
: Checked
 
    
Input: checked
 
    
Select each selected input element
 
   
 
  

 
①:The special style that hover adds when moving the cursor over the link.
Tip:: The hover selector can be used for all elements, not just links.
Tip:: The link selector sets the Page link style that has not been accessed. The visited selector sets the style of the accessed Page link: the active selector sets the style when you click the link.
Note:To achieve the expected results, in the CSS definition, the: hover must be located after: link and: visited!
②:The focus selector is used to select elements with focus.
Tip:: The focus selector accepts Keyboard Events or other user input elements.
The selected style when an input field obtains the focus: input: focus {background-color: yellow ;}
1 
③:The checked selector matches each selected input element (only applicable to single-choice buttons or check boxes ).
Set the background color for all selected input elements: input: checked {height: 50px; width: 50px ;}
 1 

   

 
    
 
     
 
      
Selector
 
      
Example
 
      
Description
 
     
 
     
 
      
: Enabled
 
      
Input: enabled
 
      
Select an enabled input element
 
     
 
     
 
      
: Disabled
 
      
Input: disabled
 
      
Select a disabled input element
 
     
 
    

   
1 <! DOCTYPE html> 2 
5. Common sibling element selector:
It is used to specify the styles used by all other sibling elements of a certain type after an element in a parent element.
For example, the sub-p element under the same div is "~" Connection, div ~ P {background-color: gold}