[聊聊]HTML与CSS入门17——CSS选择器（2）

上次说了四种选择器：类型选择器、ID选择器、类选择器和后代选择器。

常用的选择器就这四种，不过CSS的选择器还有很多，虽然不常用，但是用到了还是很方便的，今天就来介绍。

通配选择器
通配选择器，就是选择所有元素。通配选择器很简单，就是一个星号*。

* {}
div * {}

第一条规则选择页面中的所有元素。
第二条规则和后代选择器结合，选择所有div元素的所有后代元素（而不是div元素本身）。

其实我们前面介绍的类选择器和ID选择器都是通配选择器的省略写法。完整的ID选择器和类选择器其实是包含类型选择器（其实所有的选择器都是包含类型选择器的，从另一方面来说，通配选择器可以看作一种特殊的类型选择器）

div.header {}
*.header {}
.header {}

第一条规则是一个完整的（包括类型选择器的）类选择器。
第二条规则是一个包含通配选择器的类选择器。
第三条规则是省略通配选择器的类选择器（也就是我们上次介绍的形式）。

直接子代选择器
后代选择器选择的是某元素的所有后代元素，但是有时我们只想要选择下一级的后代元素（也就是子元素），而不想选择子元素的子元素，那么我们就可以使用直接子代选择器。
直接子代选择器使用右尖括号>来连接两个选择器，当然，我们得在>两边加上空格。也就是直接子代选择器其实是用“ > ”（空格、右尖括号、空格）来连接的。在前一个选择器选择的元素的子元素中查找后一个选择器选择的元素。

div > .article {}
div > a {}

第一条规则选择所有div元素的子元素，而子元素的条件是类中有article。
第二条规则选择所有在div元素内的a子元素，如果一个a元素在div内的p元素内，则不会被选择。

相邻选择器
相邻选择器有直接相邻选择器（用+连接）和间接相邻选择器（用~连接）。相邻选择器在前一个选择器选择的元素的同一级元素（既不是祖先元素也不是后代元素，而是同一级元素！）中查找后一个选择器选择的元素。直接相邻查找当前元素紧接着的下一个元素，间接相邻查找同一级的后面的元素（不往前查找），但是不要求紧接着（可以紧接，也可以不紧接）。

p.section + p {}
p.section ~ .link {}
#header + #body

第一条规则选择类中有section的p元素的紧接着的下一个p元素，如果下一个元素不是p则不会被选择。
第二条规则选择类中有section的p元素的同一级的类中有link的元素。
第三条规则查找ID为header的元素的紧接着的ID为body的元素。

第三条有什么意义？难道不能直接选择ID为body的元素？前面说过，一个CSS可以被多个HTML引用。因此可能一个HTML文档中，header紧接着body，但是在另一个文档中，header和body之间还有其他元素。于是第三条规则就有意义了。

属性选择器
属性选择器很复杂，但是却是所有选择器中最强大的。故名思意，属性选择器就是根据元素的属性来选择的。属性选择器有很多不同的选择方式，但是所有的选择条件都要放到方括号[]中，而且必须紧接着前面的类型选择器不能有空格，如果使用通配选择器也不能省略。

1、属性存在性
直接在方括号中写上属性名就能选择所有设置了该属性的元素。

td[colspan] {}

这个选择器选择了所有设置了colspan属性的td元素。

2、属性值匹配
在属性名后面写上等号的属性值，就像在给元素设置属性值一样。单个单词可以不写引号，但是属性值中包含空格的话就要写上引号。

input[type=text] {}

选择所有type属性值为text的input元素。

ID选择器可以看作是这一种的特例。如下面两条规则选择的元素是一样的：

p#header{}
p[id=header] {}

3、属性值是空格分隔的列表，选择包含其中的一项
把上面的等号前加一个~就是了。
如一个a元素的rel属性是"alternate index"，而另一个a元素属性是"alternate copyright"，我想选择rel列表包含alternate的元素，那么就可以用：

a[rel~=alternate] {}

这样就选择了rel属性包含alternate的a元素了。

类选择可以看作这一种的特例。如下面两条规则选择的元素是一样的：

p.section {}
p[class~=section] {}

4、属性值只有这个值或以这个值开始后面紧接着是连字符（减号-）的列表
等号前是|就行了。

a[hreflang|=zh] {}

这条规则选择所有hreflang是zh或以zh开始紧接着连字符的列表（如zh-cn、zh-tw、zh-hk、zh-hans、zh-hant等等）的a元素。

5、属性值以某个值开始
等号前是^就行了。和上一种不同的是，上一个以某个值开始后面紧接着的是连字符，而这个没有这样的限制。

a[href^="http://www.dmdjz.com.cn/" {}

这条规则选择所有href属性以http://www.dmdjz.com.cn/开头的a元素。

6、属性值包含什么
和第2种不同的是：第2种是在空格分隔的列表中包含，而这个不要求有分隔。在等号前加上*就行了。

a[href*=".com.cn"] {}

这条规则选择所有在href属性中包含.com.cn的a元素。

7、属性值以某个值结束
和第5中情况对应，在等号前加上$就行了。

a[href$="php"] {}

这条规则选择所有href属性以php结束的a元素。


这次介绍的就这些了。属性选择器是非常强大的，但是当前浏览器不一定支持所有的方式（特别是IE），所以我们在使用前一定要多加测试。

下次我们将介绍伪类和伪元素选择器。

==========之前的内容==========
HTML与CSS入门1——认识HTML
HTML与CSS入门2——深入认识HTML与认识CSS
HTML与CSS入门3——HTML元素（1）
HTML与CSS入门4——HTML元素（2）
HTML与CSS入门5——HTML元素（3）
HTML与CSS入门6——HTML元素（4）
HTML与CSS入门7——块级元素、行内元素（顺带介绍div元素）与元素的嵌套
HTML与CSS入门8——HTML元素（5）
HTML与CSS入门9——HTML元素（6）
HTML与CSS入门10——HTML元素（7）
HTML与CSS入门11——HTML元素（8）
HTML与CSS入门12——HTML元素（9）
HTML与CSS入门13——HTML元素（10）
HTML与CSS入门14——HTML元素（11）
HTML与CSS入门15——CSS基础
HTML与CSS入门16——CSS选择器（1）

额，有些多一两个标点符号就成了另一种属性选择器了。

又看到学习帖了

间接相邻选择器~
属性选择器中的^= $= *=
都是CSS3中加入的吧,ie会敖娇的.

又有长进了~
每天进步一点点~

很不错呀，又复习了一下

表示来学习了~~~~~额,用起来的话,还是得看看,感觉不太容易记住

咱看得有點暈的說