Css 选择符 selectors
模式匹配
在CSS中，模式匹配的规则确定了文档树中的元素应用哪些样式规则。这些模式，就是选择符，可能也就是通过简单的元素名来丰富整个上下文的模式。对于一个元素来说，如果一个模式所有的条件都符合的话，我们就可以这样说：这个选择符匹配这个元素。
元素的名字可能是区分大小写的，这取决于他所在的文档语言。例如，在HTML中，是元素名是不区分大小写的，而在XML中，就是区分的。
在 CSS 2.1 中不同的选择符语法：
- 元素选择符
*通配选择符：匹配所有元素
E类型选择符：匹配所有的E元素
E#myidID选择符：匹配所有的带有id属性等于myid的E元素
E.myclass类选择符：匹配所有的带有属性class中包含myclass的E元素
- 关系选择符
E F包含选择符：匹配所有被E元素包含的F元素
E>F子选字符：匹配所有作为E元素的子元素F
E+F相邻选字符：匹配紧贴在E元素之后的F元素
- 属性选择符
E[attr]匹配所有带有attr属性的E元素
E[attr="val"]匹配带有attr属性等于val的E元素
E[attr~="val"]匹配带有attr属性并且属性值中包含val的E元素
E[attr|="val"]匹配带有attr属性并且属性值中有以val开头的E元素
- 伪类
E:link超链接元素a在未被访问前的样式
E:visited超链接元素a在被访问后的样式
E:active[动态伪类]元素在被用户激活（鼠标按下但是未释放之间）时的样式
E:hover[动态伪类]元素在鼠标悬停时样式
E:focus[动态伪类]元素在获得焦点时样式
E:lang(c)匹配使用语言c的元素
E:first-child匹配父元素的第一个子元素E
- 伪元素
:first-line设置元素的第一行的样式
:first-letter设置元素的第一个字母的样式
:before插入在元素内容之前的内容
:after插入在元素内容之后的内容
注意的是当
:first-line和first-line伪元素被应用到一个元素上，同时:before或:after也被应用到这个元素上时，:before和:after中的内容也是会被:first-line和first-line当做内容的一部分的。
选择符语法
一个简单的选择符可以是一个类型选择符或者通用选择符加上零个或者多个属性选择符、ID选择符或者伪类，他们可以是任意顺序的。可以说一个简单的选择符匹配了的条件就是他的所有的组件都匹配。
一个选择符是由一个或者多个简单的选择符通过结合符（” “、”>”和”+”）链接而成的。空格可以出现在一个结合符和一个简单选择器之间的。
文档树中匹配了一个选择符的元素就叫做这个选择符的‘匹配元素’（subjects）。一个由简单选择符组成的选择符可以匹配满足他条件的任何元素。由一个简单选择器和结合符组成的匹配规则链所匹配出的对象总是匹配的最后一个简单选择符的元素的一个子集。
在一个伪元素可以添加到一个匹配规则链的最后一个简单选择符的情况下，样式信息就会被应用到每一个匹配元素上的一部分元素上，可能不大明白，参见下边的这个例子：
body > div:first-letter {
color:red;
}
上边的例子中
body是一个简单选择符，div也是一个简单的选择符，>是一个结合符，然后:first-letter则可以理解为伪元素；除去伪元素部分，这个选择符的‘匹配元素’就是body下的所有div元素，然后伪元素的样式信息（颜色:红色）就会被应用到body下的所有div元素的第一个字符上。
分组
当多个选择符具有相同的声明的时候，他们可以组合成一个由,分割的列表。
参见下边的示例：
h1 {font-family: sans-serif}
h2 {font-family: sans-serif}
h3 {font-family: sans-serif}
其实和下边的是同等的写法
h1, h2, h3 {font-family: sans-serif}
在CSS中也提供了其他的‘简短’写法，包括多声明和简写属性（复合属性）。