跳到主要内容

CSS有哪些基本选择器?它们的权重是如何表示的?

参考答案:

CSS(层叠样式表)的基本选择器有以下几种:

  1. 元素选择器:元素选择器是最基本的选择器,它根据HTML元素的名称来选择元素。例如,p选择器会选择页面上的所有<p>元素。
  2. 类选择器:类选择器使用HTML元素的class属性值来选择元素。类选择器以.开始,后面跟着类名。例如,.myClass会选择所有class="myClass"的元素。
  3. ID选择器:ID选择器使用HTML元素的id属性值来选择元素。ID选择器以#开始,后面跟着id名。例如,#myID会选择id="myID"的元素。
  4. 属性选择器:属性选择器根据元素的属性及其值来选择元素。例如,[type="text"]会选择所有type属性值为text的元素。
  5. 通配符选择器:通配符选择器*选择页面上的所有元素。

关于选择器的权重,CSS有一个优先级规则,它基于选择器的类型和顺序来决定哪个样式规则会应用于元素。权重计算规则如下:

  • 内联样式(在HTML元素内部的style属性中定义的样式)的权重最高,优先级最高。
  • ID选择器的权重次之,每个ID选择器的权重为100。
  • 类选择器、属性选择器和伪类的权重再次之,每个的权重为10。
  • 元素选择器和伪元素的权重最低,每个的权重为1。
  • 通用选择器(*)、子选择器(>)、相邻选择器(+)和兄弟选择器(~)不影响权重,但会影响匹配的特异性。

如果多个选择器具有相同的权重,那么最后定义的规则将覆盖先前定义的规则。如果权重不同,则权重高的规则将覆盖权重低的规则。在选择器的权重相同时,后出现的规则会覆盖先出现的规则,这被称为“就近原则”。

请注意,权重的计算是从右向左进行的,也就是说,最右边的选择器的权重最高,然后向左依次递减。例如,.myClass h1的权重为11(10+1),因为h1是一个元素选择器,权重为1,而.myClass是一个类选择器,权重为10。