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;
}
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中各种选择器的一个总结。