自学内容网 自学内容网

QD1-P23 CSS 基础选择器

本节学习:CSS 基础选择器(5种)


本节视频

https://www.bilibili.com/video/BV1n64y1U7oj?p=23


基础选择器是 CSS 中最常用的选择器类型,它们用于选择 HTML 文档中的元素。以下是基础选择器的列表以及它们的优先级(权重):

基础选择器

  1. 通配符选择器

    • 选择所有元素。
    • 示例:* { ... }
  2. 元素选择器

    • 选择特定类型的 HTML 元素。
    • 示例:p { ... }​, h1 { ... }​, div { ... }
  3. 类选择器

    • 选择具有特定类名的元素。
    • 示例:.classname { ... }
  4. ID 选择器

    • 选择具有特定 ID 的元素。
    • 示例:#idname { ... }
  5. 属性选择器

    • 选择具有特定属性或属性值的元素。
    • 示例:[attr] { ... }​, [attr=value] { ... }
  6. 伪类选择器

    • 选择处于特定状态的元素。
    • 示例::hover { ... }​, :visited { ... }​, :first-child { ... }
  7. 伪元素选择器

    • 选择元素的特定部分。
    • 示例:::before { ... }​, ::after { ... }​, ::first-letter { ... }

选择器的优先级(权重)

选择器的优先级由以下规则决定:

  1. 行内样式(Inline Style)

    • 权重最高。
    • 示例:<p style="color: red;">
  2. ID 选择器

    • 权重为 0100​。
    • 示例:#example { ... }
  3. 类选择器、属性选择器、伪类

    • 权重为 0010​。
    • 示例:.classname { ... }​, [attr] { ... }​, :hover { ... }
  4. 元素选择器、伪元素

    • 权重为 0001​。
    • 示例:p { ... }​, ::before { ... }
  5. 通配符选择器

    • 权重最低,为 0000​。
    • 示例:* { ... }

在选择器组合时,权重会相加。例如:

  • .example​(类选择器)权重为 0010​。
  • #example​(ID 选择器)权重为 0100​。
  • p.example​(类选择器和元素选择器组合)权重为 0011​。
  • div p#example​(元素选择器和 ID 选择器组合)权重为 0111​。

注意:使用 !important​ 规则可以覆盖任何其他优先级,但不建议频繁使用,因为它会使得 CSS 的调试和维护变得更加困难。!important​ 的使用会忽略上述的权重计算规则。


原文地址:https://blog.csdn.net/qq_38641599/article/details/142892157

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!