What are the selectors in CSS? Do you know the priority order of selectors?

As a front-end engineer, you are no stranger to CSS selectors. Selectors are an essential part of our layout. So do you know what selectors are in CSS? What is the priority order of CSS selectors? Only when you know the secrets can you be more comfortable at work. Next, let’s talk about CSS selectors and their priority order.

1. What are the CSS selectors?

There are many selectors in CSS, such as: ID selector, class selector, wildcard selector, pseudo-class selector Wait, let’s mainly introduce some commonly used ones.

1. Tag selector

Syntax: tag name{}, eg: h1{} //Set styles for all h1 elements.

2.ID selector

Syntax: #id name{} //The id value must be unique and cannot be repeated, eg: #top{} //Set the style for the element with the id of top.

3. Class selector

Syntax: .class{}, eg: .box{} //Set styles for all elements whose class value is box.

4. Group selector

Syntax: selector 1, selector 2, selector N{}, eg: #box1,.box2,p{} //The id is box1 , class sets the style for the elements of box2 and p together.

5. Wildcard selector

Syntax: *{}, eg: *{font-size: 16px} //Set the font size of the entire page to 16px.

6. Descendant selector

Syntax: Selector 1 Selector 2{}, eg: p .aa{} //Select the specified descendant .aa of the specified ancestor element p.

7. Child element selector

Syntax: parent element>child element{}, eg: p>.box{} //Select the specified child element .box of the parent element p. Note the difference from descendant element selectors

8. Pseudo-class selector

Pseudo-classes can be used to represent some special states, such as:
: link - unvisited super Link.
: visited - a hyperlink that has been visited.
:hover - the element that the mouse passes over.
: active - the element being clicked.

eg: a:hover{color:red} //When the mouse passes the a label, the color changes to red.

2. Priority order of CSS selectors

When different values ​​of the same attribute are applied to the same element, if there is a conflict between the defined attributes, So whose value should be used, this time involves the priority order of CSS.
1. Using !important after the attribute will override the element style defined anywhere in the page.
2. Internal style written as style attribute within the element
3.id selector
4. Class selector
5. Tag selector
6. Wildcard selector
7. Browser-customized or inherited

summary sorting: !important > Internal style > ID selector > Class selector > Tag selector > Wildcard selector > Inheritance > Browser default attributes

Summary: The above summarizes the commonly used selectors in CSS and their syntax rules. As for the priority order of the selector, only the final conclusion is given here. You still need to try it yourself. There will be no demonstration here. Hope this tutorial can help you!

The above is the detailed content of What are the selectors in CSS? Do you know the priority order of selectors?. For more information, please follow other related articles on the PHP Chinese website!