一, 属性选择器
1,E[attr] 表示存在 attr 属性, 但没有确定任何属性值;
2,E[attr=val] 表示属性值完全等于 val;
3,E[attr*=val] 表示的属性值里包含 val 字符并且在 "任意" 位置;
4,E[attr^=val] 表示的属性值里包含 val 字符并且在 "开始" 位置;
5,E[attr$=val] 表示的属性值里包含 val 字符并且在 "结束" 位置, 效果与 E[attr^=val] 相反;
二, 伪类选择器
1, 结构伪类
E:first-child 第一个子元素: 向上找到 E 的父元素, 父元素的第一个子元素若为 E, 则实现选择效果, 如果第一个不为 E, 则没有筛选到任何元素.
E:last-child 最后一个子元素
E:nth-child(n) 第 n 个子元素, nth-child 选择器在计算子元素是第 n 个元素, 是连同所有父元素中所有子元素一起计算的, 确定位置是要包含所有元素;
E:nth-last-child(n) 同 E:nth-child(n) 相似, 只是倒着计算;
n 遵循线性变化, 其取值 0,1,2,3,4,... 但是当 n<=0 时, 选取无效.
n 可是多种形式: nth-child(2n+0),nth-child(2n+1),nth-child(-1n+3) 等;
注意: 在原来的基础上添加了一个元素, 原来的结构伪类会因为筛选不到元素造成样式失效或者样式混乱, 例如:
为了避免上述情况, 可以用 E:nth-of-type(n)
E:nth-of-type(n): 和 E:nth-child(n) 非常类似, 不同的是它只计算父元素中指定的 E 类型的子元素, 上面的例子就可以直接利用这个选择器实现, 它可以只选中 p 元素.
E:empty 选中没有任何子节点的 E 元素;
2, 目标伪类
E:target 结合锚点进行使用, URL 后面跟锚点 #, 指向文档内某个具体的元素. 这个被链接的元素就是目标元素 (target element),:target 选择器用于选取当前活动的目标元素;
- /* 给没有. special 的 li 元素设置样式.*/
- li:not(.special){
- background-color:red;
- }
三, 伪元素选择器
E::first-letter 文本的第一个单词或字 (如中文, 日文, 韩文等), 常见的效果为首字母下沉;
E::first-line 文本第一行, 不管浏览器放大缩小, 始终是第一行;
E::selection 可改变选中文本的样式;
重点: E::before,E::after 默认是一个行内元素, 需要转换成块元素
E:after,E:before 在旧版本里是伪元素, CSS3 的规范里 ":" 用来表示伪类,"::" 用来表示伪元素, 但是在高版本浏览器下 E:after,E:before 会被自动识别为 E::after,E::before, 这样做的目的是用来做兼容处理.
":" 与 "::" 区别在于区分伪类和伪元素
注意: after,before 与 content 一起使用!!!
Selection:selection 为选中的字体设置样式, 但是不支持 font-size
四, 对象文字占位
::placeholder 伪元素用于控制表单输入框占位符的外观, 它允许开发者 / 设计师改变文字占位符的样式, 默认的文字占位符为浅灰色. 当表单背景色为类似的颜色时它可能效果并不是很明显, 那么就可以使用这个伪元素来改变文字占位符的颜色.
需要注意的是, 除了 Firefox 是::[prefix]placeholder, 其他浏览器都是使用::[prefix]input-placeholder
Firefox 支持该伪元素使用 text-overflow 属性来处理溢出问题.
来源: https://www.2cto.com/kf/201807/759202.html