关于下列 CSS 选择器：ID 选择器、类选择器、伪类选择器_字节跳动笔试题

熊在匣子里

选择器的优先级从高到低依次是： 1.在属性后面使用 !important会覆盖页面内任何位置定义的元素样式 2.作为style属性写在元素标签上的内联样式 3.id选择器 4.类选择器 5.伪类选择器 6.属性选择器 7.标签选择器 8.通配符选择器 9.浏览器自定义实际上，同一个元素可以使用多个规则来指定它的字体颜色，每个规则都有自己的选择器。显然最终只有一个规则起作用（不可能一个字既是红色又是绿色），那么该规则的特殊性最高，特殊性即css优先级。那么CSS的优先级怎么计算呢？选择器的特殊性值表述为4个部分，用0,0,0,0表示。 ID选择器的特殊性值，加0,1,0,0; 类选择器、属性选择器或伪类，加0,0,1,0; 元素和伪元素，加0,0,0,1; 通配选择器对特殊性没有贡献，即0,0,0,0; 最后比较特殊的一个标志!important(权重)，它没有特殊值，但是他的优先级是最高的，为了方便记忆，可认为他的默认值是1,0,0,0.

发表于 2017-03-23 17:52:38 回复(0)

宋佑廉

选择器的优先级:

1在属性后面使用!important会覆盖页面内任何位置定义的元素的样式

2作为style属性写在元素内的样式

3id选择器

4类选择器

5标签选择器

6通配符选择器

class选择器和伪类选择器的优先级是一样的

发表于 2018-10-27 17:40:02 回复(0)

g给不二

可以使用ICE（特指度去记忆）

I:id

C:class

E:element

从上到小权重依次减小分别是100 10 1

发表于 2018-03-14 22:01:42 回复(0)

牛客958379号

D？

发表于 2016-12-26 12:02:33 回复(0)

墨裳花开

答案：D

解析：

一般来说，选择器的优先级（从上往下依次降低）是：

在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
作为style属性写在元素内的样式
id选择器
类选择器
标签选择器
通配符选择器

所以选项B和D可以确定答案肯定是从这两个里面出，那么究竟是class选择器优先级高，还是伪类选择器优先级高呢？来段代码效果，一目了然：

效果：

注意一样的样式代码，前后顺序不同，导致的效果变化：

效果：

也就是说：伪类选择器和类选择器的优先级是一样的，谁在后面谁起作用，因为我们知道后面的样式会覆盖前面的样式

编辑于 2017-05-23 14:27:09 回复(14)

自带BMG的小菇凉

答案：D
解析：
优先级由高到低可分为：

在属性后面使用!important会覆盖页面内任何位置定义的元素样式。
作为style属性写在元素内的样式
id选择器
类选择器 = 伪类选择器=属性选择器（后面的样式会覆盖前面的样式）
标签选择器
通配符选择器
浏览器自定义的样式

发表于 2018-05-11 15:46:08 回复(0)

天天打游戏梦毕业吗？

权重的等级
1、!important，加在样式属性值后，权重值为 10000
2、内联样式，如：style=””，权重值为 1000
3、ID 选择器，如：#content，权重值为 100
4、类，伪类和属性选择器，如： content、:hover 权重值为 10
5、标签选择器和伪元素选择器，如：div、p、:before 权重值为 1
6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为 0

发表于 2019-12-01 20:56:13 回复(0)