前端早读课——02提升你的CSS选择器技巧

本文主要是介绍前端早读课——02提升你的CSS选择器技巧，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

提升你的CSS选择器技巧

请戳这里 -> https://mp.weixin.qq.com/s/aK31FJ6QeMZ6nhjnJihqAg

笔记
组合选择器
后代选择器 A B
子元素选择器 A>B
相邻兄弟选择器 A+B
通用兄弟选择器 A~B
属性选择器
语法：标签[属性=属性值] 或者 标签[属性]
如果要匹配属性值部分，则可以使用以下方法：
A[attr^=val] 属性值以val开头。
A[attr|=val] 属性值等于val或者以“val-”开头;
A[attr$=val] 属性值以val结束。
A[attr*=val] 属性值中包含了val；
A[attr~=val] 属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个val词。
（以上所有属性选择器实例都区分大小写。但是我们有一个技巧，如果我们在结束方括号之前插入一个i，我们可以不区分大小写进行匹配。）
用户界面选择器
（1）如果你处理过表单样式，那么你之前一定遇到过这些伪类选择器：
:enabled 启用状态(可激活或获取焦点)的元素。
:disabled 禁用状态的元素。
:checked 选中状态的元素。
（2）这些是比较常用到的，还有其他一些有趣的伪类选择器：
:default 可以匹配一个或多个元素，这些元素是一组相关元素中默认的元素。
（3）下面的伪类选择器可以匹配输入值是否有效，以及在提交表单之前检查必填项是否填写：
:valid 内容验证正确的元素。
:invalid 内容验证未通过的元素。
:required 有required属性的元素（必填项）。
:optional 没有required属性的元素（可选项）。
（4）接下来的两个伪类选择器匹配拥有取值范围（支持 min 和 max 属性）的元素：
:in-range 当前值处于属性 min 和 max 限定的范围之内。
:out-of-range 当前值处于属性 min 和 max 限定的范围之外。
（5）最后我们再介绍三个伪类选择器：
:read-only 匹配不可被用户编辑或拥有 readonly 属性的元素。
:read-write 匹配可以被用户编辑或拥有 contenteditable 属性的元素。
:placeholder-shown 匹配占位文字处于显示状态的元素，当输入内容后，占位文字不再显示时，该元素将不会被匹配；应谨慎使用此选择器，因为它尚未得到广泛支持。
结构选择器
（1）使用参数来做匹配的选择器如下：
:nth-child() 正序匹配某个元素的一个或多个子元素。
:nth-last-child() 倒序匹配某个元素的一个或多个子元素。
:nth-of-type() 正序匹配某个元素的一个或多个特定类型子元素。
:nth-last-of-type() 倒序匹配某个元素的一个或多个特定类型子元素。
（2）仅匹配特定的子元素，无法通过传递参数以修改其行为的选择器如下：
:first-child 匹配某个元素的第一个子元素。
:last-child 匹配某个元素的最后一个子元素。
:only-child 匹配某个元素的唯一一个子元素。
:first-of-type 匹配某个元素的第一个特定类型子元素。
:last-of-type 匹配某个元素的最后一个特定类型子元素。
内容选择器
::first-line 匹配元素的第一行（仅在应用于块级元素时才起作用）。
::first-letter 匹配元素的第一个字母（仅在应用于块级元素时才起作用）。
::selection 匹配文档中被用户高亮部分（比如使用鼠标或其他选择设备选中）。
以下是需要我们关注的一些内容选择器：
::inactive-selection 匹配当前窗口处于非激活状态下已被选取的文档中被用户高亮部分。
::spelling-error 匹配浏览器标识拼写错误的文本段。
::grammar-error 匹配浏览器标识语法错误的文本段。
::marker 匹配列表项目标记符号（即 <li> 元素由 type 属性生成出的标记符号）。
::placeholder 匹配表单元素中的占位符文本。
杂项选择器
:target 选择器匹配的是一个ID元素，其ID与当前URL片段相对应。
:matches() 选择器
:any-link 选择器，它可以同时匹配 :link 和 :visited 两种链接状态。
:dir() 匹配 dir 属性定义了文本方向的元素。
:lang() 匹配 lang 属性定义了语言的元素。
个人补充
:after/::after和:before/::before的区别？
相同点：
1.都可以用来表示伪类对象，用来设置对象前的内容
2.:和::写法是等效的
不同点：
1.:是CSS2的写法，::是CSS3的写法
2.:的兼容性要比::好
3.不过在H5开发中建议使用::比较好
注意：
1.这些伪元素要配合content属性一起使用
2.这些伪元素不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入
3.这些伪元素的特效通常要使用:hover伪类样式来激活