CSS 选择器常见知识点总结

hauk0101
182 阅读6分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第9天，点击查看活动详情

核心描述

  • 简单选择器（元素选择器）
    • 类选择器
    • ID 选择器
    • 通用选择器
  • 组合选择器

    • 后代选择器：用空格表示，如p span 表示 p 元素下嵌套的所有 span 元素，不区分子元素还是隔代元素

    • 子选择器：用 > 表示

    • 相邻兄弟选择器：用 + 表示

    • 通用兄弟宣泄器：用 ~ 表示

    • 示例说明：

      选择器示例说明
      A,B匹配满足A（和、或）B的任意元素
      A B匹配任意元素，满足条件：B是A的后代节点（B是A的子节点，或B是A的子节点的子节点
      A>B匹配任意元素，满足条件：B是A的直接子节点
      A+B匹配任意元素，满足条件：B是A的下一个兄弟节点（AB有相同的父节点，并且B紧跟在A的后面
      A~B匹配任意元素，满足条件：B是A之后的兄弟节点中的任意一个（AB有相同的父节点，B在A之后，但不一定紧挨着A
  • 属性选择器
    • 存在和值属性选择器
      • [attr]：该选择器包含 attr 属性的所有元素，不论 attr 为何值
      • [attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素
      • [attr~=val]：该选择器仅选择属性的值（以空格间隔出多个值）中有包含 val 值的所有元素，比如位于被空格分隔的多个类中的一个类
    • 子串值属性选择器，此种情况类似正则匹配，但非真正的正则表达式
      • [attr|=val]：选择 attr 属性的值以 val（包括 val）或 val-开头的元素（-用来处理语言编码）
      • [attr^=val]：选择 attr 属性的值以 val（包括 val）的元素
      • [attr~=val]：选择 attr 属性的值种包含字符串 val 的元素
  • 伪类选择器
    • 以一个冒号作为前缀的关键字，多用于特定状态下才显示的样式
    • 伪类举例：
      • :active
      • :checked
      • :first
      • :first-child
      • :focus
      • :hover
      • :nth-child()
      • ……
  • 伪元素选择器
    • 以两个冒号为前缀的关键字，表示某个元素的某个位置产生出某个DOM节点
    • 伪元素举例：
      • :after
      • :before
      • ……
  • 伪类与伪元素对比：
    • 每个选择器最多只能使用一个伪元素，每个选择器可以使用多个伪类；
    • 示例
    // 这样写是可以生效
 .item:first-child:hover{
    color: red;
    background-color: blue;
}

// 这样写是不生效的
.container::after::before{
    content: '111*';
    width: 10px;
    height: 10px;
}
  • 多用选择器，并非专门的选择器，而是一种使用思路，即用 , 分割多个选择器，放在同一个规则下面，减少重复代码

知识拓展

  • CSS 文件引入的方式
    • 通过 <link> 标签引入，只能放到 <header></header>中
    • 通过 <style> 元素引入
    • 内联样式，写在元素的 style 属性中
  • CSS 文件引入的优先级
    • 内联样式 > 其他方式（通过 link 或者 style 的方式，取决于他们在 html 中插入的顺序）
  • 选择器的优先级
    • !important > 内联 > ID选择器 > 类选择器 > 标签选择器 > 通用选择器
    • 后引入的样式会覆盖前面引入的样式
    • 不同的选择器有对应的权重值，实际中样式的应用是不同选择器的权重值累加之后的结果，权重值最大的选择器生效
  • CSS 选择器的性能
    • CSS 选择器的选择顺序是由右向左
    • CSS 选择器性能排行
      • ID 选择器（ #id ）
      • 类选择器（ .className ）
      • 标签选择器（ div h1 p ）
      • 相邻选择器（ h1+p ）
      • 子选择器（ ul > li ）
      • 后代选择器（ li a ）
      • 通配符选择器（ * ）
      • 属性选择器（ a[rel="external"] ）
      • 伪类选择器（ a:hover li:nth-child ）
    • 说明：在实际应用中的编码规范应该尽可能的便于浏览器快速通过选择器查找出符合条件的目标元素
  • 实战应用：一些相对成熟的可供参考的项目级 CSS 应用方案
    • BEM 命名规范
      • Bem 是块（block）、元素（element）、修饰符（modifier）的简写，由 Yandex 团队提出的一种前端 CSS 命名方法论。
      • 解决的问题：
        • 可以获得更多的描述和更加清晰的结构，从其名字可以知道某个标记的含义。于是，通过查看 HTML 代码中的 class 属性，就能知道元素之间的关联。
        • 减少选择器的嵌套，帮助浏览器快速定位到目标元素
      • 用法：
        • 中划线（-）：仅作为连字符使用，表示某个块或某个子元素多单词之间的连接记号
        • 双下划线（__)：用来连接块和块的子元素
        • 单下划线（_）：用来描述一个块或者块的子元素的一种状态
      • 示例：type-block__element_modifier
    • Vue 的 SFC - scope style 的应用
      • SFC 即我们常见的 .vue 文件，是 single-file components 的缩写，主要包括 template、script、styles、customBlocks 4 个模块
      • 当我们使用 scope 时，通过 vue-loader 编译后的文件如下：
        • dom 元素示例：
        // HTML 中的元素，scope 表现在 data-v-469af010 的属性，
// 其中 469af010 为 vue 在编译过程中定义的 scopeId
<div data-v-469af010 class="hello">
<h1 data-v-469af010>Welcome to Your Vue.js App</h1></div>
        • css 示例：
        // css 选择器，通过 .hello[data-v-469af010] 来匹配对应的 DOM 元素
.hello[data-v-469af010] {
    color: red;
}
      • Scope CSS 即作用域 CSS，组件化所密不可分的一部分。Scope CSS 使得我们可以在各组件中定义的 CSS 不产生污染。
      • 但是使用 scope css 根据上面说的选择器的性能排序，会对浏览器选择元素渲染 CSS 时造成一定的性能影响，但对于实际应用而已，其带来的好处以及现代浏览器的渲染优化，是可以忽略掉这部分影响
    • React 中的 css in js 方案：
      • styled-components
      • CSS Modules ： Ant Design 选择的就是此方案

参考资料

浏览知识共享许可协议

本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。

avatar
文章
阅读
粉丝