第二章 选择器

第二章 选择器

通配符选择器 ^ $ *
^ e[attr^="val"]{} 元素e的attr属性以值val字符串开始
$ e[attr$="val"]{} 以值val字符串结尾
* e[attr*="val"]{} val字符串包含在属性值内

根元素选择器 :root
:root{background:green}
:root 选择器前没有任何元素选择器
相当于html元素选择器， 但优于
在IE9中可用于hack？

空元素选择器 :empty
p:empty{}
元素中没有任何内容，即使是一个空格


“非”选择器 not
input:ont(type="submit"){}
与jQuery中的not选择器使用方法相同

目标选择器 :target
<a href="#brand">Brand</a>
<div id="brand">...</div>
#brand:target{color:red}
即点击a元素时实现对id为brand，即div元素的样式控制


第一个和最后一个子元素 first-child last-child
ul>li:first-child{}
注意：主体不是ul，而是li，即需要是啥元素，就是啥元素。

过滤子元素 nth-child(n)
ul>li:nth-child(2n+1){}
n：可为整数值，不过从1开始，0或者<0都不会选中任何元素
2n+1：这种形式，n的值从0开始计算
还可以使用even和odd这两个关键字

倒数第几个子元素 nth-last-child(n)
ul>li nth-last-child(2){}
n只能是正整数

第一个某类元素 first-of-type
类似于first-child，不过选择的是相应的元素类型
如，要选择类为wrapper中第一个为div的元素
.wraper div:first-of-type{}


nth-of-type
相当于 nth-child和first-of-type的结合

last-of-type
类似于last-child

nth-last-of-type(n)
类似于nth-last-child

:only-child
此元素是父元素仅有的一个子元素
如，选中ul元素中仅有的一个li元素
ul li:only-child{}

only-of-type
类似于only-child，不过父元素可以有多个子元素，但此类型只能有这一个

::selection
页面中选中的文本一般都是蓝底白字，可以通过这个伪类实现样式控制。
前面不加任何元素选择器
firefox中要加 -moz ::-moz-selection

disabled 和 enabled
选择文档中元素是否设置disabled属性的元素。
input[type="text"]:disabled{}

:checked
应用于表单元素的单选或复选框

:read-only :read-write
应用于文档中设置有readonly属性的元素
两者意义相反