css选择器学习

选择器优先级

0 通配符，部分逻辑组合伪类:not() :where() :is()
1 标签选择器
10 类选择器、属性选择器、伪类
100 ID选择器
1000 style属性内联
10000 !important 选择器。从上面可以看到，无论如何都不能使用!import，!important 只能用于动态重置js设置的代码（js重置js代码，不能在css文件中硬编码）。如果需要提升优先级，可以采用.xxx.xxx.xxx、.xxx[class][class]这两种形式

不同等级的选择器不能通过数量的堆积来跨越，比如一个ID选择器，即使重复10个class选择器也不能覆盖，正是因为这种无法覆盖的特性，禁止使用ID选择器，一定是禁止。

html

<style>
    /* 优先级 2 */
    .container .text {
        color: red;
    }

    /* 重复书写 优先级 3*/
    .text.text.text { 
        color: blue;
    }
    /* 上面方法或许不优雅 */
    .text[class][class]  { 
        color: green;
    }
</style>
<div class="container">
    <p class="text">文字</p>
</div>

查找性能

ID选择器
class
标签
通配
属性
部分状态伪类

优先使用class选择器，属性选择器仅特殊使用。

css渲染的理解

css渲染的查找循序是从右往左，css解析时会把树形的css结构变成hash的结构方便快速查找。在渲染某个dom时，先从右往左检查是否命中css选择器。如果命中采用优先级高的，如果未命中检查是否有继承值，如果还没有采用默认值。

a链接变色怪事

额外需要记住，伪类的优先级和类选择器相同

css中大小写问题

HTML中标签和属性不区分大小写，但是属性区分大小写，所以有如下规则

标签选择器不区分大小写
属性选择器前面的属性不区分，后面的属性值区分，可以通过在]前面添加i 表示不区分。 [class=TEXT i] [ID=TEXT i]。
class和ID选择器本质上是属性值选择器有区分。

特殊命名

可以使用-开头的css命名，可以起到强调作用.-important

不要出现一下命名

.box .title .text .header .main .aside .warnning .success .red .green 都加上前缀。

html标签中获得灵感

header body aside main nav section content summary detail option img footer a li g(roup) desc x(box) 这几个加上前缀,百试不爽。

html属性中获取

radio button checkbox range number email tel color date url time file cell log menu log tab list panel tree row region item

状态类（禁止在css中声明，只能配合用）

active invalide disabled selected checked 需要注意的是所有的转态

css命名最佳实践

嵌套层级不能过深
尽量低优先级
不要div.text 这种意义不大的选择器
公共结构、公共模块、UI组件、精致布局都不适合面向属性的命名
细枝末节和特殊场景微调适合面向属性的命名
状态类不能单独使用

js中后代选择器逻辑

html

<div>
    <section ID="test">
        <div class="target"></div>
    </section>
</div>

document.querySelector("#test").querySelectorAll("div div").length // 1

js中后代选择器是作用域是全局的，针对每一个子节点检查css命中情况。而且是在全局范围内检查。target满足全局范围内的div div所以命中。

如果需要只在子节点css域检查，需要添加 ":scope div div"

谨慎使用>子选择器

会强制绑定DOM结构，违背了分离原则。可以采用具名的后代选择器实现限制选择

相邻兄弟选择器和兄弟选择器

会忽略文本节点和注释节点
可以实现:first-child 效果 li+li 和 :not(li+li) xxx + *。:first-child必要是第一个子节点，+的应用范围大一些。

html

<style>
   li + * {
       color: red
   }
</style>
<ol>
   <li></li>
   <li></li>
   <!-- asd -->
   <li></li>
   123
   <li></li>
   <li></li>
</ol>

配合状态伪类实现css上面的逻辑交付

|| 属于选择符

用于表格中通过colgroup 设置样式。 .xxx || td 查找td 同时属于.xxx。

元素选择器

不能重复自身(废话)
可以简单提升优先级比如 html body .text提升了.text。
组合时必须写在前面input[type=radio]，而且尽量不写。

ID选择器

dom中可以存在多个相同的id，id选择器也会正常命中，包括querySelectorAll。还有个历史原因ID属性会被绑定到window同名变量上，多个相同id会绑定成数组。

属性值选择器

格式类似[attr="xxx"]，没得空格可以省略引号。

[attr=xxx] 完全匹配
[attr~="xxx"] 单词匹配匹配class="xxx xxx1" 但是不匹配 class="xxx1xxx"。使用场景是九宫格定位时 class="center top" class="left bottom" 这一类场景出现
[attr=|"xxx"] 开头单词部分(或者全匹配)匹配匹配 class="xxx-x xx" 不匹配 class="xx xxx-x"或则 class="xxx x"，用于部分前缀匹配。
[attr^="xxx"] 前缀匹配，能够包含前一匹配。可以用于判断a链接类型，展示不同图标。
[attr$="xxx"] 后缀匹配可以用于判断文件类型展示不同图标。
[attr*="xxx"] 包含匹配可以匹配当前链接是不是站外地址

通过动态的添加css可以实现过滤效果。

const search = (searchValue) => {
    styleEl.innerHTML = `
        [data-search*="${searchValue}"]: {
            display: none
        }
    `
}

通过兄弟选择器实现展示隐藏

通过添加transition保证从a到img中，不会突变显示。

html

<style>
    .target-button:hover ~ .visible-img, .visible-img:hover {
        visibility: visible；
    }

    .visible-img {
        visibility: hidden;
        transition: visibility .2s;
    }
</style>
<a class="target-button"></a>
<img href="xxx"/>

通过:focus 伪类实现下拉暂存效果

通过设置tableIndex实现元素能否被聚焦 tabIndex=0 不能被聚焦 tabIndex=-1 不能被tab检索，但是能点击触发:focus tabIndex=1 可以被tab检索也能触发:focus

html

<style>
.target-button:focus ~ .visible-img {
    visibility: visible;
}
</style>
<div classk="target-button" tabIndex="-1">任意元素</div>
<img class="visible-img" href="xx"/>

上面实现在苹果下有问题，需要在最外层添加tabIndex=-1（不能在body上）

:ctive 伪类

匹配任意元素，当鼠标按下时触发，抬起时消失。

html

<style>
    div:active::after {
        content: "active伪类";
    }
</style>
<div>
    点击我
</div>

可以用于埋点数据。

css

.xxx:active::after {
    content: url(xxx);
    display: none;
}

不使用display: none或者visibility: hidden隐藏内容

这两种方式会导致键盘检索失效。建议通过下面方法或者opacity:0 来实现

css

.hidden {
    position: absolute;
    clip: rect(0 0 0 0)
}

focus-within

子元素触发focus会触发，用于下拉中有操作的情况。

选择器优先级 ​

查找性能 ​

css渲染的理解 ​

a链接变色怪事 ​

css中大小写问题 ​

特殊命名 ​

不要出现一下命名 ​

html标签中获得灵感 ​

html属性中获取 ​

状态类（禁止在css中声明，只能配合用） ​

css命名最佳实践 ​

js中后代选择器逻辑 ​

谨慎使用>子选择器 ​

相邻兄弟选择器和兄弟选择器 ​

|| 属于选择符 ​

元素选择器 ​

ID选择器 ​

属性值选择器 ​

通过兄弟选择器实现展示隐藏 ​

通过:focus 伪类实现下拉暂存效果 ​

:ctive 伪类 ​

不使用display: none或者visibility: hidden隐藏内容 ​

focus-within ​

选择器优先级

查找性能

css渲染的理解

a链接变色怪事

css中大小写问题

特殊命名

不要出现一下命名

html标签中获得灵感

html属性中获取

状态类（禁止在css中声明，只能配合用）

css命名最佳实践

js中后代选择器逻辑

谨慎使用>子选择器

相邻兄弟选择器和兄弟选择器

|| 属于选择符

元素选择器

ID选择器

属性值选择器

通过兄弟选择器实现展示隐藏

通过:focus 伪类实现下拉暂存效果

:ctive 伪类

不使用display: none或者visibility: hidden隐藏内容

focus-within