CSS选择器总结

1. 元素选择器

这是最基本的选择器，HTML中的html、p、h1、h2、h3、em、a等这些个元素自身就可以是选择器，例如

html {color:white;}h1 {color: gray;}h2 {color: silver;}

2. 通配选择器——* 

这个选择器能够匹配到HTML文档中所有的元素，例子：

* {color: red;}

3 类选择器

带有class属性的元素，可以使用class属性的值来进行选择，比如一段HTML文档有以下内容：

<p class="warning">This  is a warn!</p>

那么，为了根据类来选择到对应的元素，并设置CSS风格，我们可以这样做

p.warning {font-weight: bold;}

这个选择器只有对带有warning类的p元素才起作用，如果我们想要对所有带有warning类的元素都引用这个样式，我们可以将选择器写成*.warning 或者直接写成 .warning。

4 多类选择器

从类选择器中衍生出的多类选择器，通过把两个类选择器接在一起，可以选择到同时包含着两个类名的元素，这个过程中类名的顺序无关紧要。比如一段文档中有以下内容：

<p class="warning urgent help">There is a multiple class selecor here</p>

可以通过以下方式来选择到这个元素：

.urgent.warning {background-color: red;}

而，.warning.help的选择器同样能够成功选择到这个元素。

5 ID选择器

ID选择器通过应用某个元素中id属性的值来选择到这个元素，假设一个HTML文档中有以下的内容：

<p id="iamaid">Hello world!</p>

为了将Hello world!的背景色变成绿色，我们可以这样使用ID选择器：

#iamaid {background-color: green;}

6 属性选择器

如果我们想为所有具有class属性的元素的内容的颜色设置成红色，那么我们可以通过以下方式选择到所有带有class属性的元素：

*[class] {color: red;}

而如果我们想同时选择带有class 并带有href属性的元素的时候，非常简单，只需要将附加的属性href附加到以上选择其中即可：

*[class][href] {color: red;}

其中，class与href的顺序是无所谓的。

7 属性值选择器

首先需要知道的是，根据属性的值进行匹配的时候，实际上是进行的一个字符串是否相等的判断，如果字符串的值相等才能匹配，所以如果对于class属性有多个类指定的情况下，选择器也必须按照完全相同的顺序写完class的完整的值。

比如对于如下的HTML文档

<p class="warning urgent help">There is a multiple class selecor here</p>

如果我们想要通过属性值选择器选择到这个p元素并将其背景颜色设置成红色的话，我们必须写成这样：

p[class="urgent warning help"] {background-color: red;}

8 部分属性值选择器

考虑如下HTML文档

<p class="test1 test2     test3        test4">Hello tests!</p>

 如果这个时候我们使用属性值选择器的时候，因为是做的字符串的相等比较，那么我们必须按照原样将class的属性值写到我们的选择器中，甚至其中那些可恶的空格也必须一个不少的写上，否则就会匹配不到。而是用部分属性值选择器，它可以使用属性的多个值中的一个进行选择，而这所谓的多个值仅仅是将字符串以空格分割之后形成的多个部分。具体到以上的这段HTML文档，如果要选择到这个元素，可以通过以下部分属性值选择器：

p[class~="test4"] {color: green;}

除了以上的这种匹配之外，很多浏览器还提供了字串匹配选择器，这种方式借用了正则表达的一些符号:

p[class^="test1"]  选择class值以test1为开头的所有元素（value.startswith("test1")）

p[class$="test4"] 选择class值以test4为结尾的所有元素(value.endswith("test4"))

p[class*="test"] 选择class中包含test的所有元素（value.contains("test")）

所以以上三个选择器都能够选择到我们本部分中的那个p元素。

以上就是CSS中各种选择器的一个总结。