本篇只介绍CSS3新增选择器,CSS3之前的不会出现。
目录
[class='abc'] (匹配class是abc的元素)
[class^='abc'] (匹配class是以abc开头的元素) 关键词(以...开头)
[class$='abc'] (匹配class是以abc结尾的元素) 关键词(以...结尾)
[class~='abc'] (匹配多个属性值中具有abc属性值的元素)
[class*='abc'] (匹配多个属性值中包含abc属性值的元素) ~= 和 *= 比较容易混淆,但仔细看一下就能看懂了。
> 直接子元素选择器
顾名思义是只会选择到下一层的子元素,不会选子元素的子元素,举个栗子~
+ 毗邻选择器
匹配紧邻在该元素后面的一个兄弟元素,关键词(近邻,兄弟)!看栗子~
~ 关联选择器
匹配该元素后面的所有指定兄弟元素,关键词(所有,兄弟)!
::first-letter
匹配首字符
::first-line
匹配首行
::selection
匹配鼠标左键选中的文字,默认是蓝底白字
加样式后可自定义了
:target
可以对跳转到锚点的元素进行自定义样式
[class] (匹配有class属性的元素)
-
[class='abc'] (匹配class是abc的元素)
-
[class^='abc'] (匹配class是以abc开头的元素) 关键词(以...开头)
-
[class$='abc'] (匹配class是以abc结尾的元素) 关键词(以...结尾)
-
[class~='abc'] (匹配多个属性值中具有abc属性值的元素)
-
[class*='abc'] (匹配多个属性值中包含abc属性值的元素) ~= 和 *= 比较容易混淆,但仔细看一下就能看懂了。
:first-child
匹配第1个子元素
:last-child
匹配最后1个子元素
:nth-child(2)
匹配第2个位置上的子元素,括号内是第几个,从1开始 关键词(指定某个位置)
:nth-last-child(2)
匹配倒数第2个位置上的子元素,括号内是第几个,从1开始 关键词(指定某个位置)
p:nth-of-type(1)
匹配第一个元素类型为p的元素,会无视掉其他元素 关键词(不指定某个位置,一直到找到该元素的位置为止)