CSS有哪些基本选择器?它们的权重是如何表示的?
参考答案:
CSS(层叠样式表)的基本选择器有以下几种:
- 元素选择器:元素选择器是最基本的选择器,它根据HTML元素的名称来选择元素。例如,
p
选择器会选择页面上的所有<p>
元素。 - 类选择器:类选择器使用HTML元素的
class
属性值来选择元素。类选择器以.
开始,后面跟着类名。例如,.myClass
会选择所有class="myClass"
的元素。 - ID选择器:ID选择器使用HTML元素的
id
属性值来选择元素。ID选择器以#
开始,后面跟着id名。例如,#myID
会选择id="myID"
的元素。 - 属性选择器:属性选择器根据元素的属性及其值来选择元素。例如,
[type="text"]
会选择所有type
属性值为text
的元素。 - 通配符选择器:通配符选择器
*
选择页面上的所有元素。
关于选择器的权重,CSS有一个优先级规则,它基于选择器的类型和顺序来决定哪个样式规则会应用于元素。权重计算规则如下:
- 内联样式(在HTML元素内部的
style
属性中定义的样式)的权重最高,优先级最高。 - ID选择器的权重次之,每个ID选择器的权重为100。
- 类选择器、属性选择器和伪类的权重再次之,每个的权重为10。
- 元素选择器和伪元素的权重最低,每个的权重为1。
- 通用选择器(
*
)、子选择器(>
)、相邻选择器(+
)和兄弟选择器(~
)不影响权重,但会影响匹配的特异性。
如果多个选择器具有相同的权重,那么最后定义的规则将覆盖先前定义的规则。如果权重不同,则权重高的规则将覆盖权重低的规则。在选择器的权重相同时,后出现的规则会覆盖先出现的规则,这被称为“就近原则”。
请注意,权重的计算是从右向左进行的,也就是说,最右边的选择器的权重最高,然后向左依次递减。例如,.myClass h1
的权重为11(10+1),因为h1
是一个元素选择器,权重为1,而.myClass
是一个类选择器,权重为10。