Summary of css selector priority order!

This article mainly introduces to you what css selector priority order is.

First of all, everyone should know what css selector is, right?

If we use css to achieve one-to-one, one-to-many or many-to-one control over the elements in the HTML page when designing a web page, we need to use CSS selectors.

The elements in the HTML page are controlled through CSS selectors.

Simply put, the selector can be understood like this.

Each css style definition consists of two parts, the form is as follows:

[code] Selector {style} [/code] The part before {} is "selector" ".

The "selector" specifies the object of the "style" in {}, that is, which elements in the web page the "style" acts on.

So you can briefly understand what are the categories of css selectors?

1. Tag selector

body,div,p,ul,li...

2. Class selector

class="demo"
class="demo_1"

3. ID selector

id="name",id="name_t"

4. Global selector

*

5. Combination selector

.demo .demo_1
/*两选择器用空格键分开*/

6 , Descendant selector

#head .nav ul li
 /* 从父集到子孙集的选择器 */

7. Group selector

div,span,img {color:blue}
/*即具有相同样式的标签分组显示*/

8. Inheritance selector

div p
/*两选择器用空格键分开*/

9. Pseudo-class selector

link、visited、active、hover...
/* 链接样式,a元素的伪类，4种不同的状态*/

10. Attribute selector for string matching

^ $ *
/*分别对应开始、结尾、包含*/

11. Sub-selector

div>p
/* 带大于号>*/

12. CSS adjacent sibling selector

h1+p
/*  带加号+ */

Complete understanding of css Classification, everyone also needs to briefly understandWhat is cascading?

Stackability: is the ability of CSS to handle conflicts. Stackability is an ability. When multiple selectors describe the same attribute, who should this attribute listen to?

Then below we summarize the priority order of css selectors!

css priority sorting：!important > Inline style>ID selector> Class selector> Tag> Wildcard> Inheritance> ; Browser default attributes

The basis for this sorting is mainly because each selector has its own weight, and each css rule contains a weight level, which is a different choice. Calculated using weighted weights. Different levels of weight will produce different styles, and different styles will be reflected in your web pages.

So for details about css weight, you can refer to this article

[What is the measure of priority in css? Introduction to the usage of css weight 】

If you want to know more about the front-end, you can follow the PHP Chinese website CSS video tutorial, Bootstrap tutorial, etc. Tutorial, everyone is welcome to refer to and study!

The above is the detailed content of Summary of css selector priority order!. For more information, please follow other related articles on the PHP Chinese website!