CSS notes selector and CSS note Selector

CSS notes selector and CSS note Selector
Reading directory

• Describes the basic syntax format of CSS.
• Introduction to basic Selector
• Introduction to the combination Selector
• Introduction to pseudo Selector
• Introduction to other

I. basic CSS syntax format

Code:

<! DOCTYPE html> 
The running result is:
The paragraph is red.


Note:
Back to Top





Ii. Basic Selector
The basic selector is divided:

 

 
  
Type Selector
 
  
Class Selector
 
  
Id Selector
 
  
General Selector
 
  
Attribute Selector

 
1. Type Selector
Code:
<! DOCTYPE html> 
The running result is:
This paragraph is red.
This paragraph is also red.
The paragraph is still red.


Note:
Returns the base selector directory.



2. class selector
Code:
<! DOCTYPE html> 
The running result is:
The background color of this paragraph is yellow.
No background color is set for this section.


Note:
Returns the base selector directory.



3. id Selector
Code:
<! DOCTYPE html> 
The running result is:
The font of this section is increased.
This section does not contain the font size.


Note:
Returns the base selector directory.





4. General Selector
Code:
<! DOCTYPE html> 
The running result is:
I am red. I am red.
I am also red.
I am still red


Note:
Returns the base selector directory.





5. Attribute Selector
Code 1:
<! DOCTYPE html> 
The running result is:
Elements whose matching attribute is href:
Baidu


Note:


Code 2:
<! DOCTYPE html> 
The running result is:
Exact match: only the elements with the same attributes and values are matched:
Back to Top

Returns the base selector directory.


Note:


Code 3:
<! DOCTYPE html> 
The running result is:
Match the attributes with the strings in the attribute values:
Baidu

Baidu Post Bar


Note:
There are many attribute selectors. Here we only list three of them.
For other property selectors, see https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Returns the base selector directory.



Back to Top





3. Combination Selector
Combination selector:

        

 
         
A + B {property: value ;}
 
         
A ~ B {property: value ;}
 
         
A> B {property: value ;}
 
         
A B {property: value ;}

        
1. A + B {property: value ;}
Code:
<! DOCTYPE html> 
The running result is:
This is a paragraph.
This is a test text.
This is another paragraph.

This is another test text.


Note:
Returns the combined selector directory.



2. ~ B {property: value ;}
Code:
<! DOCTYPE html> 
The running result is:
This is a paragraph.
This is a test text.
This is another paragraph.

This is another test text.


Note:
Returns the combined selector directory.



3. A> B {property: value ;}
Code:
<! DOCTYPE html> 
The running result is:
Test text 1
Test text 2
Test Text 3


Note:
Returns the combined selector directory.



4. a B {property: value ;}
Code:
<! DOCTYPE html> 
The running result is:
Test text 1
Test text 2
Test Text 3


Note:
Returns the combined selector directory.



Back to Top





4. pseudo Selector
Pseudo selector:

            

 
             
Pseudo-class selector
 
             
Pseudo element Selector

            
1. Pseudo-class selector
Code 1:
<! DOCTYPE html> 
The running result is:
When the mouse is hovering over the following link, the link turns red:
Baidu


Note:


Code 2:
<! DOCTYPE html> 
The running result is:
This is the first child element of the body.
This is the first child element of the div with id = "1"
This is the second child element of the div with id = "1"
This is the first child element of the div with id = "2"
This is the second child element of the div with id = "2"


Note:


Code 3:
<! DOCTYPE html> 
The running result is:
This is the first child element of the body.
This is the first child element of the div with id = "1"
This is the second child element of the div with id = "1"
This is the first child element of the div with id = "2"
This is the second child element of the div with id = "2"


Note:
Returns the pseudo selector directory.



2. pseudo element Selector
The pseudo-element selector is used in CSS3.
For example:
/* CSS3 syntax */::after/* CSS2 syntax */:after
Specific usage reference https://developer.mozilla.org/en-US/docs/Web/CSS/::after
Returns the pseudo selector directory.



Back to Top





V. Others
CSS selectors can be divided into three categories: Basic selectors, combination selectors, and pseudo selectors.
These three categories can be used separately or in combination.
For example:
<! DOCTYPE html> 
The running result is:
This is a paragraph.
This is also a paragraph.


Note:
CSS Reference Document https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
Back to Top