无效的CSS选择器和浏览器支持的CSS选择器在代码中一起出现的时候，会导致整个选择器无效
被继承的CSS声明的优先级一定位于整个CSS世界的底层。
css层级优先级：日常开发代码>@layer开发代码>插件注入代码>浏览器内置代码。
如何在跨css文件时使用@layer：在传统的@import语法后面再添加一个layer(some-name)就可以了
级联层级的优先级关系：
(1)设置了!important的浏览器内置样式；
(2)设置了!important的用户设置的样式；
(3)@layer规则中设置的包含!important的样式；
(4)开发者设置的包含!important的样式；
(5)开发者设置的CSS样式；
(6)@layer规则中的CSS样式；
(7)用户设置的CSS样式；
(8)浏览器内置的CSS样式。
出现一个0级选择器，优先级数值+0；出现一个1级选择器，优先级数值+1；出现一个2级选择器，优先级数值+10；出现一个3级选择器，优先级数值+100。
选择器可以以数字或者特殊字符开头，只是需要将其转义（使用非空格表示法）
.active类名推荐用法是：自身无样式，它只是一个状态标识符，用来与其他类名发生关系，使其他类名的样式发生变化
通配选择器* { box-sizing: border-box; }上述用法不足以覆盖所有元素，因为有些元素是无特性的，如::before和::after构成的伪元素
在所有的HTML属性中，支持多值的属性其实很少，其中一个是rel属性，另一个是class属性
querySelectorAll后面的选择器默认是全局匹配的，要想划定范围，可以使用:scope伪类，其作用就是让CSS选择器的作用域限定在某一范围内
hover伪类最好在支持hover交互的场景下使用，我们可以使用对应的媒体查询语句实现，例如：@media (hover: hover)
与:active伪类不同，:focus伪类默认只能匹配特定的元素，包括：● 非disabled状态的表单元素，如输入框、
- 如何让普通元素也能响应:focus伪类呢？设置了HTML contenteditable属性的普通元素可以应用:focus伪类
- 设置了HTML tabindex属性的普通元素也可以应用:focus伪类
- 最后强调一点，一个页面最多有一个焦点元素，这就意味着一个页面最多只会有一个元素响应:focus伪类样式。
- 说不良的用户体验，指的是一旦设置了outline:none，这些控件元素再也无法使用键盘进行无障碍访问。
因为:focus-within伪类的行为本质上是一种父选择器行为，子元素的状态会影响父元素的样式。由于这种父选择器行为需要借助用户的行为触发，属于“后渲染”，不会与现有的渲染机制冲突，自然也不会带来性能问题。
在Shadow DOM中，:root伪类是无效的，应该使用专门为此场景设计的:host伪类。
:empty伪类很适合表单验证，但无法匹配包含的空格和换行符的元素
:placeholder-shown伪类
:empty伪类处理参数为空：dd:empty::before { content: ‘暂无’; color: gray;}
使用:only-child的场景是动态场景，也就是对于某个固定的小模块，根据场景的不同，里面可能是一个子元素，也可能是多个子元素，元素个数不同，布局方式就会不同，此时就是:only-child伪类大放异彩的时候。
:nth-child(-n+3)：匹配前3个元素，因为−0+3=3，−1+3=2，−2+3=1。
li:nth-child(n+4):nth-child(-n+10)：匹配第4～10个元素，这个就属于比较高级的用法了。例如，考试成绩前3名的有徽章，第4名～第10名的高亮显示，此时，这种正负值组合的伪类非常好用。
我们可以借助伪类判断当前列表项的个数，示意代码如下：/* 1个 */li:only-child {}
- 其中，:first-child:nth-last-child(2)表示当前
- 元素既匹配第一个子元素，又匹配从后往前的第二个子元素，因此，我们就能判断当前总共有两个
- 子元素
:not()伪类可以不断级联，或者使用多个表达式。参数值不仅可以是选择器，还支持选择符。例如下面的语句也是可以被现代浏览器解析的：/* 现代浏览器均支持 */input:not(.a > .b) { border: red solid; }
点击选项卡按钮后通过添加激活状态类名使隐藏的面板再次显示，CSS代码如下：.cs-panel { display: none;}.cs-panel.active { display: block;}实际上，这种效果有更好的实现方式，那就是使用:not()伪类，推荐使用下面的CSS代码：.cs-panel:not(.active) { display: none;}使用:not()伪类有如下优点。(1)使代码更简洁。(2)更易于理解。(3)最重要的是保护了原类名的优先级，扩展性更强，更利于维护。
:is()伪类有两大作用。其一是简化选择器。例如，平时开发中经常会遇到类似下面的CSS代码：.cs-avatar-a > img,.cs-avatar-b > img,.cs-avatar-c > img,.cs-avatar-d > img { display: block; width: 100%; height: 100%; border-radius: 50%;}此时就可以使用:is()伪类进行简化：:is(.cs-avatar-a, .cs-avatar-b, .cs-avatar-c, .cs-avatar-d) > img { display: block; width: 100%; height: 100%; border-radius: 50%;}这种简化只是一维的，:is()伪类的优势并不明显，但如果选择器是交叉组合的，:is()伪类就大放异彩了。例如，有序列表和无序列表可以相互嵌套，假设有两层嵌套，则最里面的元素存在下面4种可能的情况：ol ol li,ol ul li,ul ul li,ul ol li { margin-left: 2em;}如果使用:is()伪类进行简化，则只有下面这几行代码：:is(ol, ul) :is(ol, ul) li { margin-left: 2em;}
也就是:is()伪类中的参数就算有无法解析的CSS选择器，也不影响其他可解析的CSS选择器的渲染。
所有:is()伪类中的选择器在Vue框架中都是不会添加随机属性选择器的
:is()伪类并不支持伪元素，例如:is(::before, ::after)
:where()伪类的优先级永远是0，完全忽略其中参数选择器的优先级。我们可以巧妙地借助这一特性来降低某些全局CSS的优先级。
:has()伪类还支持复杂选择器和选择器列表，例如：article:has(h5, p) { background-color: #f0f3f9; }表示，只要
HTML中有3种链接元素，分别是、和，可以原生支持href属性，但:link伪类只能匹配元素
:target伪类的作用——匹配URL锚点对应的元素。
设置visibility:hidden或者display:none的元素依然能够被:enabled伪类和:disabled伪类匹配。但是:enabled伪类在JavaScript开发中很有用，因为JavaScript没有CSS这样的语句覆盖特性，必须精准匹配对应的元素才行。所以，我们要想获取表单中的可用控件元素，只能使用:enabled伪类。例如我们可以使用document.querySelectorAll (‘form :enabled’)查询所有可用表单元素，以实现自定义的表单序列化方法。
设置readonly属性的输入框不能输入内容，但它可以被表单提交；设置disabled属性的输入框不能输入内容，也不能被表单提交。设置readonly属性的输入框的样式和普通输入框类似，但是浏览器会将设置了disabled属性的输入框中的文字置灰来加以区分。
:placeholder-shown顾名思义就是“占位符显示伪类”，表示当输入框的placeholder内容显示的时候，匹配该输入框。
从实操角度讲，使用required属性配合:invalid属性判断是否填写了输入框内容更合适。
此时显然需要用到:autofill伪类（根据Caniuse网站的数据，Chrome浏览器还需要添加-webkit-私有前缀），专门匹配使用自动填充效果的输入框，例如：input:autofill { background-color: #fff; }然而，事情远没有想象的那么简单。照理说，输入框设置了背景色后，自动填充的高亮色背景就应该消失，可实际上这种效果并没有出现，输入框依然是系统默认的高亮色。对于这个问题，我的做法是使用白色的box-shadow内阴影模拟白色的覆盖层，以遮蔽输入框的高亮色背景。input:autofill {-webkit-box-shadow: 0 0 0 1000px #fff inset; background-color: transparent;}
使用[checked]属性选择器控制单复选框的样式时会出现匹配不正确的情况，而:checked伪类匹配就不存在这个问题。因此，不建议使用[checked]属性选择器。根据我的测试，这种真实状态和属性值不匹配的场景主要在checked状态变化的时候出现，disabled状态发生变化时浏览器会自动同步相关属性值。
*半选状态多用在包含全选功能的列表中。没有原生的HTML属性可以设置半选状态，半选状态只能通过JavaScript进行设置，这一点和全选不一样（全选有checked属性）。// 设置checkbox元素为半选状态checkbox.indeterminate = true;
如果大家希望隐藏按钮后面的文字“未选择任何文件”，可以对当前元素设置font-size:0。
