今天跟着培训老师的带领下,重新学习了一遍css3新增的选择器,加深了对之前了解过的选择器的理解,下面总结一下css3选择器的内容:
1、同级元素通用选择器:E~F{} =》表示选择E选择器后面的所有同级的以F为选择器的元素
2、属性选择器:
(1)E[attr^='val']{} =》表示匹配属性值以val开头的以E为选择器的元素
(2)E[attr$='val']{} =》表示匹配属性值以val结尾的以E为选择器的元素
(3)E[attr*='val']{} =》表示匹配属性值包含有val的以E为选择器的元素
3、伪类选择器
(1)E:enabled{} =》匹配表单中可用的以以E为选择器的元素
(2)E:disabled{} =》匹配表单中不可用的以E为选择器的元素
(3)E:checked{} =》匹配含有checked属性的以E为选择器的元素
(4)E::selection{} -》匹配以E为选择器中选中的内容
4、结构性伪类选择器:
(1)E:nth-child(n){} =》匹配以E为选择器的元素的父节点下的第n个子节点,这里的n可以是一个表达式(如2n-1)
(2)E:nth-last-child(n) =》匹配以E为选择器的元素的父节点下的倒数第n个子节点
(3)E:last-child{} =》匹配以E为选择器的元素的父节点下的最后一个子节点
(4)E::selection{} =》匹配以E为选择器中选中的内容
(5)E:only-child{} =》匹配以E为选择器的父节点中只有一个字节点的那个子节点
(6)E:only-empty{} =》匹配以E为选择器的空内容的那个元素
(7)E:not{F} =》匹配以E为选择器的集合中排除以F为选择器的元素