CSS 筛选器详解

1.为什么要研究CSS筛选器？因为想在页面中控制一个元素的样式太困难太麻烦了。使用内联CSS基本上宣布了放弃界面的可维护性；使用js修改样式，写不好的话，维护性也等同于零。而CSS样式表是原生的维护性最好的外挂，好的样式表，可以控制整站样式。更关键的是，jQuery也使用CSS筛选器来抓取DOM引用。因此，CSS筛选器，是前端攻城尸必修课之一。

2.什么是筛选器？筛选器，翻译成普通话，就是一个或一组判断条件。页面中有不计其数的DOM，这些DOM之间的关系又非常复杂，筛选器的目的，就是找到某个或某类符合条件的DOM，方便其他程序对这些DOM进行修改。因此，筛选器应该能描述两种信息：一是要寻找的DOM的特性，而是要寻找的DOM与其他DOM的关系。

3.筛选器的分类。CSS中一共有四种筛选器（这是我自己分的），从四个角度描述DOM的特定：
    （1）元素筛选器：p {styles...}、h2 {styles...}、* {styles...}
        直接用html标签名称进行筛选，如p表示所有段落、h2表示所有二级标题。这里有一个特殊标签就是*，表示所有。元素筛选器规定的样式，会应用到所有元素，因此只在这里设置诸如字体、字号一类的通用样式。
    （2）类筛选器：.className1  {styles... }
        这是针对含有class属性的标签而言的。html标签中规定了class属性，对应的类筛选器就会把这些DOM找到。类筛选器和元素筛选器一样，都是多元素筛选，即有多个DOM的class都设置成className，那么这些DOM的样式都会被改变。我本人不太喜欢类筛选器，因为在html中添加class也是意见很麻烦的事。
    （3）ID筛选器：#idString {styles...}
        ID筛选器用法和类筛选器很类似。但筛选的目标从class属性变成了id属性。不同在于，类筛选器会找出所有满足条件的DOM，而ID筛选器只找出第一个符合条件的DOM。因此，在html中把两个标签的id设置成一个值，第二个标签的id属性等于没用。
    （4）属性筛选器：[attr=value] {styles...}
         属性筛选器和类筛选器一样，也是多DOM选择，但又更泛化了，可以通过这个筛选一些自定义属性或者比较奇怪的属性，比如href、src。属性筛选器更强大的是，对value的匹配，有好几个运算符：
                        [attr]用于选取带有指定属性的元素。

                        [attr = value] 用于选取带有指定属性和值的元素。

                             [attr ~= value] 用于选取属性值中包含指定词汇的元素（基本等同于*）。

                             [attr |= value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词（基本等同于^）。

                             [attr ^= value] 匹配属性值以指定值开头的每个元素（常用）。

                             [attr $= value] 匹配属性值以指定值结尾的每个元素 （常用） 。

                             [attr *= value] 匹配属性值中包含指定值的每个元素 （常用） 。

4.筛选器的组合。CSS中一共有五种筛选器组合方式，从五个角度描述待寻找DOM与其他DOM之间的关系。
    （1）逗号组合：h1, h2, h3 {styles...}
        逗号组合描述了一种并集的关系，即当前元素，满足任何一个筛选器，就应用样式。比如上面的例子，如果当前标签是h1、h2、h3中任意一种，那么应用样式。
    （2）无间断组合：div.className1 {styles...}
        一个以上筛选器（一般是不同类型的筛选器），直接连在一起，中间没有任何分隔符。 这表示一种交集的关系，即当前元素，必须满足所有筛选器，才能被应用样式。比如上面的例子，如果当前元素是div标签，并且class属性为className1，那么应用样式。
    （3）空格组合：div .className1 {stlyes...}（注意与上面的区别，div后面有一个空格）
        一个以上筛选器（类别无所谓），之间存在空格。这表示一种孩子关系，空格前面的是父亲、空格后面是孩子。意思是先找出父亲，然后在父亲内部找出孩子。 比如上面的例子，筛选过程是先找到div标签A，然后在A的内部找class等于className1的标签B，然后对标签B使用样式。注意，不对A进行样式修改，只对B进行修改，另外B未必是A的直接孩子，B只要在A的内部即可。
        这种组合是非常非常常用的。也是我不喜欢类筛选器的原因。
    （4）直接孩子组合：div > .className1 {styles...}
        在空格组合中，细心的朋友可能已经注意到了，只要B在A的内部，那么就会被筛选出来。这样是否太宽泛了点，筛选的内容是否会多了点。很多时候，我们只需要找出直接孩子，而不希望找出孩子的孩子。比如：

<style>
	div p {color:#f00;}<!--样式A-->
</style>
<div>
	<p>title1</p>
	<table>
	<tr><td>
		<p>title2</p>
		<div>content1</div>
		<p>title3</p>
		<div>content2</div>
	</td></tr>
	</table>
</div>

样式A的意思是，div标签中，所有的p标签文字颜色设置成红色（这里当然可以用h1、h2、h3避免，我们只是举个例子）。所以title1-3都是红色的。但有时候，我们希望title1是红色的，而title2和title3都是灰色的，因此，要对样式表做如下修改：

<style>
div > p {color:#f00;}
td > p {color:#333;}
</style>

    （5）兄弟组合： div + .className1 {styles...}
        和直接孩子组合类似，兄弟组合也规定了一种DOM和DOM之间的关系。上面例子翻译过来是：找到一个class属性等于className1的标签A，A的”前面“有一个div标签B。请注意”前面“的含义，意思就是A和B紧挨着，并且A和B有共同的父亲，并且A在B后面渲染。那么，借用上面的例子，如果想让content1和content2的字体变成宋体，该怎样写样式表？如下：

<style>
div > p {color:#f00;}
td > p {color:#333;}
p + div {font-family:宋体;}
</style>