css优先

时间:2023-03-30 16:39:14

在HTML中,如果一个元素同时被多个CSS样式选择器所选中,那么它会按照优先级高低的顺序来应用这些样式。CSS的优先级可以通过以下规则进行计算:

选择器的类型:如果选择器只是元素选择器(如div),则优先级为1;如果是类选择器(如.my-class)或属性选择器(如[type="text"]),则优先级为10;如果是ID选择器(如#my-id),则优先级为100。

ID选择器的个数:每个ID选择器会增加100的优先级。

类选择器、属性选择器和伪类选择器的个数:每个类选择器、属性选择器或伪类选择器会增加10的优先级。

元素选择器和伪元素选择器的个数:每个元素选择器或伪元素选择器会增加1的优先级。

内联样式:内联样式(如style="color: red;")的优先级最高,为1000。

例如,对于以下样式:

#my-id {color: red;}

.my-class {color: blue;}

div {color: green;}

如果一个元素同时被#my-id、.my-class和div这三个选择器选中,那么优先级高低为#my-id > .my-class > div,因此该元素的颜色会变成红色。如果将.my-class改为.my-class.my-class,那么优先级会增加10,变成20,此时该元素的颜色会变成蓝色。

相关词 优先