What is a CSS selector? Summary of CSS Basic selectors (nine types)

What is a CSS selector? The CSS selector is the tag that specifies the CSS to function, and the name of the tag is the selector. means: Select which container. Elements in an HTML page are controlled by a CSS selector. So, what are the CSS selectors? Let's take a look at CSS common selectors

1:CSS Wildcard Selector

The wildcard selector is represented by an asterisk (*), for example:

*{    font-size:12px;}

Indicates that all elements have a font size of 12px;

2:CSS Group Selector

When several element style attributes are the same, a declaration can be called together, separating the elements with commas. For example:

P, li {line-height:20px;color: #c00;} #main p, #sider span {color: #000; line-height:26px;}

Using the group selector will greatly simplify the CSS code, will have multiple elements of the same attributes, merge groups to select, define the same CSS properties, which greatly improve the efficiency of coding, but also reduce the size of the CSS file.

3:css Tag Selector

A full HTML page is made up of a number of different tags, and the tag selector determines which tags take the appropriate CSS style, for example:

p{     color:red;}

This code will make all the P tags turn red.

4:css class Selector

The class selector targets any element with the specified class name in the Class attribute, with a "." The beginning of the symbol is for example:

. info {     Color:black;}

This makes the element color of all classes with the class name info changed to Black

5:CSS ID Selector

The ID selector can specify a specific style for HTML elements labeled with a specific ID, and the ID selector begins with a "#" symbol. For example:

#demop {    color: #000;}

This represents the setting of the element whose ID is demop and its font color is black.

6:CSS Pseudo class Selector

Sometimes it is necessary to use other criteria other than the document to apply the style of the element, such as mouse hover. This is where we need to use pseudo-classes. The following is a pseudo-class definition of the link app. For example:

a:link{    Color:green;    font-size:50px}a:hover{    Color:pink;    font-size:50px}a:active{    Color:yellow;    font-size:50px}a:visited{    color:red;    font-size:50px}

Effect:
The label is green when you open the page
Label Pink When you place the mouse over the label
Click on the label to be labeled yellow
When clicked, the label is red.

7:CSS descendant Selector

The descendant selector is used to select the descendants of a particular element or group of elements, the selection of the parent element is preceded, the selection of the child element is placed behind, and the middle is separated by a space. There are not only two elements in the descendant selector, for multi-level ancestor descendant relationships, multiple spaces can be separated, such as three elements with IDs A, B, and C, and descendant selectors can be written as #a #b #c {}, as long as the selection of the ancestor elements is separated by a space before the descendant elements. For example:

#people em{     color:red;}

This rule sets the color of any EM element in the element with the ID value "people" to red.

8:CSS Combo Selector

Two or more types of selectors can be combined using:

p.info {     color:blue;}

It selects only the paragraphs that belong to the info class, and the other elements that belong to the class and other paragraphs that are not part of the info class are ignored.

9:css Property Selector

Format: Basic Selector [property = ' property value ']{}, or write-only property, for example:

Operation Result:

CSS Selector Priority size:

!important > Inline style >id Selector > Class | Property selector > Label > Wildcard > Inherit > Browser Default properties

When there are some complex selectors that cannot be compared by the size of the priority, then we are going to use weights to calculate

CSS Selector weight calculation:



 
 
 
  
 
   
 
    
!important
 
    
Infinity
 
   
 
   
 
    
inline style
 
    
1000
 
   
 
   
 
    
ID Selector
 
    
100
 
   
 
   
 
    
Class | properties | pseudo-Class selectors
 
    
10
 
   
 
   
 
    
Tag Selector
Wildcard Selector
 
    
1
0
 
   
 
  
 

 
The greater the result of converting all selectors on each row to these values, the higher the priority!