CSS学习笔记之选择器| 豆包MarsCode AI刷题

yuanting
60 阅读11分钟

CSS（层叠样式表）选择器是用来选择HTML文档中的元素，并应用样式规则的模式。

  1. ****通用选择器(Universal Selector）**：

    • 通用选择器（Universal Selector）是CSS中一个非常基础且强大的选择器，它用星号（*）表示。这个选择器的作用是选择文档中的所有元素，无论它们是什么类型的标签。
    • *：选择所有元素。
    • 特点
      1. 选择所有元素：* 选择器不区分元素类型，它会匹配HTML文档中的每一个元素。
      2. 继承性：虽然*选择器可以应用于所有元素，但它不会影响元素的继承行为。CSS的继承规则仍然适用，即子元素会继承父元素的某些属性值。
      3. 优先级：* 选择器的优先级相对较低，它是一个类型选择器，没有ID、类、伪类或属性选择器的优先级高。如果有更具体的选择器与*选择器冲突，那么更具体的选择器会覆盖*选择器的样式。
      4. 性能考虑：由于*选择器匹配所有元素，它可能会导致样式计算变得复杂和缓慢，尤其是在大型文档中。因此，在使用时需要考虑到性能影响。
    • 例子： * { color：orange; font-size; }
    • 注意事项
      1. 性能问题：如前所述，由于*选择器匹配所有元素，它可能会对页面性能产生负面影响，尤其是在大型文档中。
      2. 覆盖问题：在使用*选择器时，需要注意它可能会覆盖其他更具体的选择器的样式，这可能会导致样式冲突。
      3. 可读性：在CSS代码中过度使用*选择器可能会降低代码的可读性和可维护性。

  2. 类型选择器（Type Selector）/元素选择器：

    • 类型选择器（Type Selector）是CSS中用于选择HTML文档中特定类型的所有元素的选择器。它直接使用HTML元素的名称作为选择器，不需要任何额外的符号或标识。这种选择器的目的是将样式规则应用到所有指定类型的HTML标签上。
    • elementname：选择所有指定类型的元素，例如 p 会选择所有段落元素。
    • 特点
      1. 简单直接：类型选择器的使用非常直接，只需写出HTML元素的名称即可。
      2. 选择同类型所有元素：它会选中页面上所有该类型的元素，而不考虑它们在文档中的位置。
      3. CSS优先级：类型选择器的优先级较低，仅高于通用选择器（*），但低于类选择器（.class）、ID选择器（#id）和属性选择器等。
      4. 继承性：类型选择器设置的样式会被其子元素继承，除非被更具体的选择器或!important规则覆盖。
    • 例子： h1 { color:orange; font-size; }
    • 注意事项
      1. 覆盖问题：类型选择器的样式可以被类选择器、ID选择器等更具体的选择器覆盖。在编写CSS时，需要注意样式的层叠和覆盖关系。
      2. 性能考虑：虽然类型选择器本身对性能影响不大，但如果页面中存在大量同一类型的元素，并且每个元素都需要应用复杂的样式计算，那么可能会对性能产生一定影响。
      3. 可维护性：过度使用类型选择器可能会导致样式表难以维护，尤其是在大型项目中。建议结合类选择器和ID选择器使用，以提高样式的可维护性和可读性。

  3. 类选择器（Class Selector）：

    • 类选择器（Class Selector）是CSS中用于选择具有特定类（class）属性的HTML元素的选择器。类选择器以点号（.）开头，后跟类名。使用类选择器，你可以为页面上所有拥有相同类名的元素应用统一的样式。
    • .class：选择所有拥有指定类名的元素，例如 .highlight 会选择所有类名为 highlight 的元素。
    • 特点
      1. 可复用性：类选择器允许你为多个元素应用相同的样式，而不需要为每个元素单独定义样式，这提高了样式的复用性。
      2. 优先级：类选择器的优先级高于类型选择器和伪元素选择器，但低于ID选择器。
      3. 组合性：类可以被添加到任何类型的HTML元素上，并且可以与元素的类型、伪类和属性选择器结合使用，以创建更具体的选择器。
      4. 继承性：类选择器设置的样式会被其子元素继承，除非被更具体的选择器或!important规则覆盖。
    • 例子： .类名 { 属性名：属性值； }
    • 注意事项
      1. 冲突和覆盖：类选择器的样式可以被ID选择器、内联样式或!important规则覆盖。在编写CSS时，需要注意样式的层叠和覆盖关系。
      2. 性能考虑：虽然类选择器本身对性能影响不大，但如果页面中有大量使用相同类的元素，并且每个元素都需要应用复杂的样式计算，那么可能会对性能产生一定影响。
      3. 可维护性：合理使用类选择器可以提高CSS的可维护性，但过度使用或滥用类选择器可能会导致样式表难以维护。

  4. ID选择器（ID Selector）：

    • ID选择器是CSS中用于选择具有特定ID属性的HTML元素的选择器。ID选择器以井号（#）开头，后跟ID的名称。每个ID在HTML文档中应该是唯一的，这意味着ID选择器会选择文档中具有指定ID的单个元素。
    • #id：选择文档中具有指定ID的元素，例如 #header 会选择ID为 header 的元素。
    • 特点
      1. 唯一性：根据HTML规范，ID在文档中应该是唯一的。因此，ID选择器会选择具有指定ID的单个元素。
      2. 优先级：ID选择器的优先级较高，高于类型选择器、类选择器和伪类选择器，但低于内联样式和!important规则。
      3. 继承性：ID选择器设置的样式会被其子元素继承，除非被更具体的选择器或!important规则覆盖。
    • 例子： id值 { 属性名：属性值； }
    • 注意事项
      1. 冲突和覆盖：ID选择器的样式可以被!important规则或内联样式覆盖。在编写CSS时，需要注意样式的层叠和覆盖关系。
      2. 性能考虑：ID选择器本身对性能影响不大，但由于ID应该是唯一的，如果文档中有大量ID选择器，可能会对样式计算产生一定影响。
      3. 可维护性：合理使用ID选择器可以提高CSS的可维护性，但过度使用或滥用ID选择器可能会导致样式表难以维护。

5。属性选择器（Attribute Selector）/复合选择器：

  • 属性选择器（Attribute Selector）是CSS中用于根据元素的属性及其值来选择元素的一种选择器。它允许你根据元素的HTML属性来应用样式，而不是仅仅基于元素的类型、类或ID。属性选择器以方括号（[]）表示，方括号内包含属性名称和可选的属性值。

    • 交集选择器（1）

    • 并集选择器（2）

    • 后代选择器（3）

    • 子元素选择器（4）

    • ......

    • 特点

      1. 灵活性：属性选择器提供了一种非常灵活的方式来选择元素，可以根据属性的存在、值、包含的单词等条件来选择。
      2. 优先级：属性选择器的优先级低于ID选择器和类选择器，但高于类型选择器。
      3. 继承性：属性选择器设置的样式会被其子元素继承，除非被更具体的选择器或!important规则覆盖。

  • 例子： （1）p.beauty { color:blue; } (2)#peiqi, .rich, .beauty { font-sixe:40px; bacground-color:skyblue; width:200px; } (3)/*选中的是ul中的所有li*/ ul li { color:red; } (4)/*div中的子代a元素*/ div>a { color:red; }

    • 注意事项
      1. 性能考虑：属性选择器可能会对性能产生一定影响，尤其是在大型文档中，因为浏览器需要检查每个元素的属性。
      2. 兼容性：虽然现代浏览器都支持属性选择器，但在一些旧的浏览器中可能存在兼容性问题。
      3. 可维护性：合理使用属性选择器可以提高CSS的可维护性，但过度使用或滥用属性选择器可能会导致样式表难以维护。
      4. 兼容性：虽然现代浏览器都支持属性选择器，但在一些旧的浏览器中可能存在兼容性问题。
      5. 可维护性：合理使用属性选择器可以提高CSS的可维护性，但过度使用或滥用属性选择器可能会导致样式表难以维护。

  1. 伪类选择器（Pseudo-class Selector）：

    • 伪类选择器是CSS中用于根据特定条件选择元素的机制，这些条件可以是元素的状态、位置或者行为。伪类选择器以冒号（:）开头，后面跟着伪类名称。伪类选择器可以与任何选择器结合使用，包括类型选择器、类选择器和ID选择器。
    • 伪类选择器是CSS中用于向特定元素添加特殊状态的样式规则的选择器。它们用一个冒号（:）表示。伪类选择器可以识别元素的不同状态，比如被点击、被悬停或者是否包含子元素等。
    • :link：选择所有未被访问的链接。
    • :visited：选择所有已被访问的链接。
    • :hover：选择鼠标悬停时的元素。
    • :active：选择被激活的元素。
    • :focus：选择获得焦点的元素。
    • :first-child：选择父元素的第一个子元素。
    • :last-child：选择父元素的最后一个子元素。
    • :nth-child(n)：选择父元素的第n个子元素。
    • ......
    • 特点和注意事项
      1. 状态指示：伪类选择器可以反映用户与页面交互时元素的状态。
      2. 优先级：伪类选择器的优先级通常低于类选择器和ID选择器，但高于类型选择器。
      3. 继承*：伪类选择器设置的样式不会被其子元素继承。
      4. 链式使用：伪类选择器可以与其他选择器一起链式使用，以创建更具体的选择规则。
      5. 性能考虑：在一些情况下，伪类选择器可能会对性能产生影响，尤其是在大型文档中，因为浏览器需要处理元素的状态变化。
      6. 兼容性：大多数伪类选择器在现代浏览器中都得到了很好的支持，但在一些旧的浏览器中可能存在兼容性问题。

  2. 伪元素选择器（Pseudo-element Selector）：

    • 伪元素选择器是CSS中用于创建虚拟元素并为其添加样式的一种机制。与伪类选择器不同，伪元素选择器用于创建页面结构中不存在的元素，而不是基于元素的状态或行为。伪元素选择器以两个冒号（::）开头，后面跟着伪元素名称。
    • ::before：在元素内容的前面插入内容。
    • ::after：在元素内容的后面插入内容。
    • ::first-letter：选择元素的第一个字母。
    • ::first-line：选择元素的第一行。
    • ......
    • 特点和注意事项
      1. 创建虚拟内容：伪元素允许你创建页面结构中不存在的元素，这为设计提供了极大的灵活性。
      2. 不影响DOM：伪元素不会在DOM中实际创建元素，它们只是CSS层面的添加。
      3. 定位和样式：伪元素可以被定位和样式化，就像普通的HTML元素一样。
      4. 性能考虑：虽然伪元素不会影响DOM，但复杂的伪元素样式可能会对性能产生一定影响，尤其是在大型文档中。
      5. 兼容性：大多数现代浏览器都支持伪元素选择器，但在一些旧的浏览器中可能存在兼容性问题。

这些选择器可以单独使用，也可以组合使用，以创建更具体的选择规则。

avatar
文章
阅读
粉丝