css3新增选择器

 

选择器：

属性选择器：

1.dom[attr]:带有attr的属性会被选择

2.dom[attr = value] ：带有attr的属性，并且值为value的元素会被选择

3.dom[attr ~= value] :带有attr的属性，并且值当中只要包含完整的value单词，就会被选择

4.dom[attr *=value] : 带有attr的属性，并且值当中只要包含value就可以被选中

5.dom[attr ^= value]:带有attr的属性，并且以value值开头就会被选中

6.dom[attr $=value] : 带有attr的属性，并且以value值结尾就会被选中

7.dom[attr |=value] : 带有attr属性，并且以vlaue - 值开头就会被选中

伪类选择器：

1、：nth-of-type(n),nth-last-of-type(n)：first-of-type,：last-of-type 同一类型中的第n个孩子，n从1开始，奇数odd，偶数even;同一类型中,从倒数开始算第n个元素；同一类型中的第一个元素、最后一个元素

2、：first-child、：last-child、：nth-child(n)、nth-last-child(n)、父元素的第一个孩子、最后一个孩子、第n个孩子，从倒数开始的第n个元素

3、：first-line/：first-letter，选择元素的第一行、元素的第一个首字母；

层级元素：

1、后代元素：空格 div p{},父元素为div,后代有p标签的

2、子代元素 ：> div>p{}，父元素是div，其第一代是p标签的

3、同级元素 ： + div+p{},同级元素，div后面紧跟着的p元素，同级

4、同级元素 ： ~ div~p{}，同级元素，div后面的所有p元素,同级

根元素：：root文档的根元素,注意与body元素的区别,两个都同时选择时，个管个的，只写一个,整个文档都会变

:empty：空元素,p：empty{} 为空的p标签，空的是里面的文本节点个属性节点都没有

:target:URL 带有后面跟有锚名称 #，指向文档内某个具体的元素id。这个被链接的元素就是目标元素(target element)。

表单元素选择器：

:enabled 被启用

:disabled 被禁用

:checked 被选中

:focus 获取焦点

::selection 选中后的文字样式

:not(selector) 否定,表示除了.....