CSS选择器整理

FLowUs邀请链接：https://flowus.cn/login?code=AXNU63
FlowUs邀请码：AXNU63

---

基本选择器

• 标签选择器：直接写标签名
• id选择器：#id名
• class选择器：.class名
• 通配选择器：*

组合选择器

• 交集：ABCDEFG......
• 并集：E, F, G, ......

关系选择器

• 后代：E F
• 子代：E > F
• 相邻：E + F
• 兄弟：E ~ F

属性选择器

• E[attr]：有attr这个属性
• E[attr = "val"]：属性等于val
• E[attr ~= "val"]：属性值以空格分隔，包含val
• E[attr ^= "val"]：属性值以val开头
• E[attr $= "val"]：属性值以val结尾
• E[attr *= "val"]：属性值包含val
• E[attr |= "val"]：属性值以-分隔，且包含val，只有val也算

伪类选择器

• E:link：链接在未被访问前的样式
• E:visited：链接a在其链接地址已被访问过时的样式
• E:hover：元素在其鼠标悬停时的样式
• E:active：元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式
• E:focus：对象在成为输入焦点（该对象的onfocus事件发生）时的样式
• E:lang(fr)：匹配使用特殊语言的E元素
• E:not(s)：匹配不含有s选择符的元素E
• E:root：匹配E元素在文档的根元素。在HTML中，根元素永远是HTML
• E:first-child：匹配父元素的第一个子元素E
• E:last-child：匹配父元素的最后一个子元素E
• E:only-child：匹配父元素仅有的一个子元素E
• E:nth-child(n)：匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效（可以用2n+1或者2n代表奇偶，也可以用odd和even代奇偶）
• E:nth-last-child(n)：匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效
• E:first-of-type：匹配同类型中的第一个同级兄弟元素E
• E:last-of-type：匹配同类型中的最后一个同级兄弟元素E
• E:only-of-type：匹配同类型中的唯一的一个同级兄弟元素E
• E:nth-of-type(n)：匹配同类型中的第n个同级兄弟元素E
• E:nth-last-of-type(n)：匹配同类型中的倒数第n个同级兄弟元素E
• E:empty：匹配没有任何子元素（包括text节点）的元素E
• E:checked：匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
• E:enabled：匹配用户界面上处于可用状态的元素E
• E:disabled：匹配用户界面上处于禁用状态的元素E
• E:target：匹配相关URL指向的E元素

伪元素选择器

• E:first-letter/E::first-letter: 设置对象内的第一个字符的样式（此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先将其设置为块级对象） ，CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors)，但以前的写法仍然有效。即E:first-letter可转化为E::first-letter
• E:first-line/E::first-line: 设置对象内的第一行的样式
• E:before/E::before: 设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性
• E:after/E::after: 设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性
• E::placeholder: 设置对象文字占位符的样式(::placeholder 伪元素用于控制表单输入框占位符的外观，它允许开发者/设计师改变文字占位符的样式，默认的文字占位符为浅灰色。当表单背景色为类似的颜色时它可能效果并不是很明显，那么就可以使用这个伪元素来改变文字占位符的颜色。 需要注意的是，除了Firefox是 ::[prefix]placeholder，其他浏览器都是使用 ::[prefix]input-placeholder Firefox支持该伪元素使用text-overflow属性来处理溢出问题。)
• E::selection: 设置对象被选择时的样式