前端早读课——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伪类样式来激活