CSS选择器(选择器的权重)：细化网页样式的秘密武器

努力写代码的小曹
170 阅读9分钟

首先CSS选择器分为两种

  1. 基本选择器
  2. 复合选择器

一，选择器的介绍

基本选择器

基本选择器的优先级
ID选择器>类选择器>元素选择器

元素选择器

元素选择器（也叫标签选择器）是 CSS 中一种常用的选择器类型，它根据 HTML 元素的标签名来选择所有匹配的元素，并应用指定的样式。它的基本使用格式： 
    tagName {
  property: value;
}

优点

  1. 选择快捷：可以快速地根据标签名称选择页面中的所有相同标签元素。对于页面中有大量相同标签的内容，元素选择器非常高效。
  2. 通用性强：适用于需要对所有同类型元素应用相同样式的场景。例如，要设置所有 <h1>、<p> 或 <div> 元素的样式时，元素选择器非常方便。
  3. 简洁：代码简洁直观，不需要额外的类名或 ID 标识。

缺点

  1. 不具选择性：元素选择器会选中所有相同标签的元素，缺乏细粒度的控制。如果页面中有多个相同的标签，而你只想修改其中一个或一部分，就会遇到困难。
  2. 缺乏区分：如果多个元素有相同的标签名，无法区分它们，需要额外的类选择器或 ID 选择器来进一步控制特定元素。
  3. 可能会影响性能：如果页面中有大量的元素，而你仅需要选中其中的一小部分，使用元素选择器可能会影响渲染性能，尤其在复杂页面中更为明显。

类选择器

类选择器是 CSS 中的一种选择器，用于选中具有特定 `class` 属性的 HTML 元素。类选择器允许开发者对多个元素应用相同的样式，而不需要为每个元素单独设置。它的基本使用方法： 
  .highlight {
          background-color: yellow;
          font-weight: bold;
}

    <p class="highlight">这是一个高亮的段落。</p>
<p class="highlight">这是另一个高亮的段落。</p>
<p>这是一个普通段落。</p>

优点

  1. 重用性：类选择器可以在多个元素上重用同一个类，从而避免重复的样式定义，提升代码的可维护性。
  2. 灵活性：可以将多个类应用于同一个元素，从而组合不同的样式。

缺点

  1. 选择性：虽然类选择器可以选择多个元素，但如果需要选中特定的元素，可能需要结合其他选择器（如元素选择器、ID 选择器）来实现。
  2. 命名冲突：在大型项目中，类名可能会发生冲突，特别是当多个开发者共同工作时。因此，制定良好的命名规范（如 BEM 方法）是非常重要的。

ID选择器

用于选中具有特定 id 属性的 HTML 元素。ID 选择器通过元素的 id 属性值来实现选择，因此它的选择性非常强，通常用于对页面中唯一的元素进行样式设置。ID 选择器的基本使用方法是：

    <div id="header">这是页面的头部</div>
<div id="footer">这是页面的底部</div>

    #header {
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

#footer {
  background-color: lightgray;
  padding: 10px;
  text-align: center;
}

优点

  1. 唯一性：在一个 HTML 文档中，id 属性的值应该是唯一的，因此 ID 选择器可以精确地选中页面中的某个特定元素。
  2. 高优先级：ID 选择器的优先级高于类选择器和元素选择器。如果多个样式规则影响同一个元素，ID 选择器的样式会优先应用。
  3. 快速定位：使用 ID 选择器时，可以快速定位到特定的元素，因为 ID 是唯一的，因此匹配的元素只有一个。

缺点

  1. 不适合重复使用：由于 ID 在文档中应该是唯一的，不能在多个元素上重复使用，因此不适合用于需要在多个元素上应用相同样式的场景。
  2. 命名冲突的风险：在大型项目中，如果多个开发者使用相同的 ID 名称，可能会导致样式冲突。因此，制定良好的命名规范是非常重要的。
  3. 可维护性：在大型项目中，过度依赖 ID 选择器可能会降低代码的可维护性，特别是当 HTML 结构发生变化时。

通配符选择器

通配符选择器是 CSS 中一种特殊的选择器，用 “*” 来表示。它可以选择页面中所有的 HTML 元素。
全局样式重置：在网页设计的初期，不同的浏览器对 HTML 元素有不同的默认样式。为了让页面在不同浏览器上的显示效果更加一致，通常会使用通配符选择器来清除所有元素的默认内外边距等样式。

复合选择器

交集选择器

交集选择器又称（并列选择器）
其通过将多个选择器组合在一起，选中同时匹配所有指定选择器的元素。

基本语法格式 ：

    selector1 selector2 {
  property: value;
}

优点

  1. 精确选择：交集选择器允许开发者精确选择同时满足多个条件的元素，适用于需要细粒度控制样式的场景。
  2. 提高可读性：通过使用交集选择器，可以使样式表更加简洁和可读，因为可以在一个选择器中定义多个条件。
  3. 灵活性：交集选择器可以与其他选择器（如元素选择器、ID 选择器和类选择器）结合使用，增加了样式的灵活性。

并集选择器

用于同时选择多个不相交的元素。通过使用逗号（`,`）将多个选择器分隔开，开发者可以一次性为多个元素应用相同的样式。
并集选择器的基本语法如下： 
    selector1, selector2, selector3 {
  property: value;
}

优点

  1. 简洁性：使用并集选择器可以在一个规则中定义多个选择器，从而减少代码的重复，提高可读性。
  2. 易于维护：当需要更改样式时，只需修改一个地方，而不需要在多个选择器中重复相同的样式。
  3. 灵活性：可以将不同类型的选择器组合在一起，例如元素选择器、类选择器和 ID 选择器。

兄弟选择器

用于选择与某个元素具有相同父元素的其他元素。兄弟选择器可以分为两种类型：相邻兄弟选择器（Adjacent Sibling Selector）和一般兄弟选择器（General Sibling Selector）
  1. 使用“+”号的是相邻兄弟选择器：用于选择紧接在某个元素后面的兄弟元素
    2. 如果后面有多个兄弟元素，只会选择第一个。
  2. 使用"~"号的是一般兄弟选择器：用于选择与某个元素具有相同父元素的所有兄弟元素

优点

可以灵活的选择特定的元素，以及简化书写清晰表达元素间的关系，从而增强代码的可读性。

属性选择器

属性选择器(Attribute Selector)用于根据 HTML 元素的属性值选择元素。
属性选择器无需额外的类或 ID，可以直接通过属性来选择元素，不必增加额外的类或 ID。
使用方法： 
    element[attribute] {
  property: value;
}

element 是 HTML 元素的标签名（如 div, a, input 等），attribute 是元素的属性名（如 href, class, id 等）。

  • 选择具有特定属性的元素
    • - 语法：element[attribute]
    - 例子：选择所有具有 href 属性的 <a> 元素：

        a[href] {
  color: red;
}
  • 选择具有特定属性值的元素
    • - 语法：`element[attribute="value"]`
    - 例子：选择所有 `class` 属性值为 `active' 的 <div> 元素： 
        div[class="active"] {
  background-color: yellow;
}
  • 选择具有特定属性值开头的元素
    • - 语法：`element[attribute^="value"]`
    - 例子：选择所有 `src` 属性值以 `http://` 开头的 <img> 元素： 
        img[src^="http://"] {
  border: 1px solid black;
}
  • 选择以 `=` 符号分隔的某个属性值列表中的元素
    • - 语法：`element[attribute|="value"]`
    - 例子：选择所有 `lang` 属性值为 `en` 或 `en-US` 的 <div> 元素： 
        div[lang|="en"] {
  font-family: Arial, sans-serif;
}
  • 选择具有特定属性值结尾的元素
    • - 语法：`element[attribute$="value"]`
    - 例子：选择所有 `href` 属性值以 `.jpg` 结尾的 <a> 元素： 
        a[href$=".jpg"] {
  font-style: italic;
}

    伪类选择器

    用于选择元素的特定状态或条件的选择器。 可以给文本添加更多样式
    使用格式： 
        selector:pseudo-class {
  property: value;
}

    其中pseudo-class 是伪类选择器，表示特定的状态或条件（例如：

    • hover
      当鼠标悬停在元素上时应用样式。
    • focus
      当元素获得焦点时应用样式（通常用于输入框、文本框等可编辑元素）。
    • first-child
      选择父元素中的第一个子元素。
    • nth-child(n)
      根据指定的规则选择父元素的子元素。n 可以是数字、关键词或公式。
    • not()
      选择不匹配指定选择器的元素。
    • checked
      选择已选中的输入元素（如复选框、单选按钮）。
    • disabled
      选择禁用的元素。
    • link
      选择未访问的链接。
    • visited
      选择已访问的链接。
    • active 
      当链接被点击时应用。

      • 伪元素选择器

      可以应用于元素的内容、前后部分或特定区域
      使用格式： 
            selector::pseudo-element {
  property: value;
}

      其中pseudo-element表示伪元素选择器，表示要选择的特定部分，如：

      • ::before
        • 在元素内容之前插入内容。
      • ::after
        在元素内容之后插入内容。
      • ::first-letter
        选择元素的首字母并应用样式。
      • ::first-line
        选择元素的第一行文本并应用样式。
      • ::selection
        选择用户选中的文本并应用样式。
      • ::marker
        选择列表项的标记部分。

        • 二，选择器的权重

        基本选择器的权重问题

        CSS 同一元素，同一样式
      • 行内 <span style="key:value;key:value">
      • 内部 <style>选择器{}</style>
      • 外部 .css文件<link>

        • 行内>内部=外部 （当同时出现内部与外部时，遵循后来者居上原则。就是后一个将前一个覆盖。）

        问:

        如果，同一个样式表的情况下通过不同的选择器选中同一个元素，该听谁的？
        这个时候选择器的权重问题就尤其重要了。
        其中 !important>行内>ID选择器>类选择器>元素选择器>通配符选择器

        复合选择器的权重计算

        设置（a,b,c）
        a: ID选择器的个数和     找“#”号
        b:类选择器，伪类选择器，属性选择器的个数和     找“.” “:” “[]”
        c:元素选择器与伪元素选择器的个数和     找”名“ “::”
        如代码： 
            /*(0,2,1)*/
    .container span.name{
        color:blue;
    }
    /*(0,1,3)*/
    div p span:nth-child{
         color:red;
    }
    /*(1,0,0)*/
    #div {
        color:yellow;
    }

        其中a,b,c的优先级是由大到小的。先比较a的值，再是b，最后是c。由此可知上面的代码，第三个选择器的权重最大，其次是第一个，第二个。
        如果权重去计算值的大小相同，则按照后来居上的原则。

    avatar
    文章
    阅读
    粉丝