在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,此时该元素的颜色会变成蓝色。