1. 属性选择器（属性+特性）
属性选择器结合了正则表达式中的^开头、$结尾、*任意位置
比如：
a[src^="https"]：选择每一个src属性的值以"https"开头的a标签
a[src$=".pdf"]：选择每一个src属性的值以".pdf"结尾的a标签
a[src*="runoob"]：选择每一个src属性的值包含子字符串"runoob"的a标签
注意：其他属性和特性都可以选中。
2. 伪类选择器（重要的几个）
（1）:not()选择每个并非什么的元素
比如：p:not([class="demo"])：选择属性class不是demo的p，括号内是属性选择器。
注意：not的括号内是对前面的选择器的修饰，not前是选择器，not括号中属性选择器。
（2）:empty 选择元素的innerhtml为空的元素，哪怕一个空格都不可以
比如：p:empty：选择innerhtml为空的p标签
（3）:target 选择当前活动的元素（包含该锚名称的点击的url）目前只知道a标签的锚点
比如：
目标元素原本的id样式，当点击后，颜色发生了改变：
（4）选择子元素（慎用）
注意：伪类选择器是修饰他之前选择器的，下面的li是子元素本身。
li:first-child：li元素是它所在层级中的第一个元素。和:nth-of-type(1)是一个意思。
li:last-child：li元素是它所在层级中的最后一个元素。
li:nth-child(3)：li元素是它所在层级中第几个元素
li:nth-last-child(3)：li元素是它所在层级中倒数第几个元素
例子：下面是标签的序号，其中序号是1的li被选中
（5）同一类型（type）的子元素
注意：伪类选择器是修饰他之前选择器的，下面的li是子元素本身。
li:first-of-type：在每一层级中，忽略其他标签，针对每一层级的li标签，选择所有的子元素的第一个li；
li:last-of-type：选择所有的子元素的最后一个li；
li:nth-of-type()：选择所有的子元素的第三个子li；
li:nth-last-of-type()：选择所有的子元素的倒数第三个li；
下面例子：每一层级中li标签的序号
（6）:only-child 唯一子元素，选中该元素是唯一子元素的元素。
ul li:only-child{color: red;}
结果：只有2变红
（7）:only-of-type 选中该类型元素（比如p标签，忽略同层级中的其他标签），子元素中该类型元素唯一
ul li:only-of-type{color: red;}
结果：2 和 3都变红
（8）关于input标签的一些选择器
input:enabled ：选择每一个已启用的输入元素
input:disabled：选择每一个禁用的输入元素
input:checked：选择每个选中的输入元素
input:read-only：用于匹配设置 "readonly"（只读） 属性的元素（一些文本框，input框等会用到）
input:read-write：用于匹配可读及可写的元素
比如：
结果：当点击复选框的时候，每一次点击复选框都会发生变化，选中时，是上图的样式，取消选中时，是原来的样式
注意：修饰的是复选框，input的文字，因为input是单标签，后面的文字跟input标签没有关系。
比如：
结果：特别注意value属性的含义
3. 伪元素
css3对伪元素有了一定的调整，必须使用双：：
（1）::first-letter 选中标签内第一个字或字母
（2）::first-line选择标签的第一行
（3）::before 和 ::after
(4) ::selection匹配元素中被用户选中或处于高亮状态的部分，用鼠标选中文本时，默认情况下，效果是“蓝色的背景，白色的字体”
::selection{color: red;} 设置所有的文字
也可以设置某个标签元素的文字
4. 条件选择
（1）p > p ：直接子元素，p标签下的直接子元素p
（2）p + p ：元素后的第一个兄弟节点，p标签后面的紧跟着的第一个兄弟节点且是p标签，该p标签被选中。
（3）p ~ p ： 元素后的兄弟节点，
比如：
结果：
如对本文有疑问， 点击进行留言回复！！
深入理解CSS background-blend-mode的作用机制
我要评论
网友评论