1、元素选择器
最常见的css选择器当属元素选择器了，在HTML文档中该选择器通常是指某种HTML元素，例如：p,h2,span,a,div乃至html。
例如：
html {background-color: black;}p {font-size: 30px; backgroud-color: gray;}h2 {background-color: red;}以上css代码会对整个文档增加彩色背景；将所有p元素字体大小设置为30像素同时增加灰色背景；对文档中所有h2元素增加红色背景。
通过下面的例子也能够看出css的根本规定构造：由选择器和申明块组成。每个申明块中蕴含一个或多个申明。每个申明的格局为：属性名 ： 属性值。
每条申明以分号”;”结尾。如果在一个申明中应用了不正确的属性值，或者不正确的属性，则该条申明会被疏忽掉。另外请留神不要遗记每条申明前面的分号。
咱们也能够同时对多个html元素进行申明：
h1, h2, h3, h4, h5, h6, p {font-family: 黑体;}这样会将文档中所有的h1~h6以及p元素字体设置为”黑体”。如果咱们心愿一锅粥地选取所有的元素，能够应用通配符"*"： * { font-size: 20px;}
这样所有的元素都将被选中，尽管font-size属性对于某些元素是有效的，那么它将被疏忽。
2、类选择器
(1)单类选择器
单纯的元素选择器仿佛还过于毛糙了，比方咱们心愿在文档中突出加粗显示某种重要的内容，例如稿件的截至日期。问题在于咱们不能确定稿件的截至日期将会呈现在哪种元素中，或者它可能呈现在多种不同的元素中。这个时候，咱们能够思考应用类选择器(class selector)。
要应用类选择器咱们须要首先对文件元素增加一个class属性，比方截至日期可能会呈现在以下元素中:
<p class="deadline">...</p><h2 class="deadline">...</h2>这样咱们就能够用以下形式应用类选择器了：
p.deadline { color: red;}h2.deadline { color: red;}点号”.”加上类名就组成了一个类选择器。以上2个选择器会抉择所有蕴含”deadline”类的p元素和h2元素。而其余蕴含该属性的元素则不会被选中。
如果咱们省略.deadline后面的元素名，那么所有蕴含该类的元素都将被选中：
.deadline { color: red;}通常状况下，咱们会组合应用以上2者失去更加乏味的款式：
.deadline { color: red;}span.deadline { font-style: italic;}以上代码首先会对所有的蕴含deadline的元素字体设置为红色，同时会对span元素中的文本增加额定的斜体成果。这样，如果你心愿某处文本领有额定的斜体成果将它们放在<span></span>中就能够了。
(2)多类选择器
在实际的做法中，元素的calss属性可能不止蕴含一个单词，而是一串单词，各个单词之间用空格隔开。
比方某些元素蕴含一个”warning”类，某些元素蕴含一个”important”类，某些元素同时蕴含”warning important”类。属性名呈现的程序没有关系：
class = "warning important"class = "important warning"以上2者是等价的。咱们心愿蕴含warning类的元素有一个醒目的红色字体，蕴含important属性的元素有一个加粗的字体显示，而同时蕴含以上2中属性的元素另外领有一个蓝色背景(不论还能不能看清文字了)，咱们能够应用以下的css代码：
.warning { color: red;}.important { font-weight: bold;}.warning.important { background: blue;}当然，第三条你也能够写成： .important.warning { background: blue;} 和词序没有关系。阐明一下，.warning会匹配所有蕴含warning属性的元素，不论该元素还蕴含多少其余的属性。.important同理。而.important.warning会匹配所有同时蕴含以上2种属性的元素，不论该元素还蕴含多少其余的类，也不论他们在类列表中呈现的程序，只有其中含有这2个属性，则会被抉择进来！
同样地，多于多类选择器，在后面加上元素名，则会匹配蕴含指定类名的指定元素，例如：p.warning.important {}
将会匹配同时蕴含warning和important属性的p元素，其余同样蕴含以上2类的元素则不会被选中。
3、ID选择器
ID选择器和类选择器有些相似，然而差异又非常显著。首先一个元素不能像类属性一样领有多个类，一个元素只能领有一个惟一的ID属性。其次一个ID值在一个HTML文档中只能呈现一次，也就是一个ID只能惟一标识一个元素(不是一类元素，而是一个元素)。相似类属性，在应用ID选择器前首先要在元素中增加ID属性，例如：
<p id="top-para">...</p><p id="foot-para">...</p>应用ID选择器的办法为井号”#”前面跟id值。当初咱们应用id选择器抉择以上2个p元素如：
#top-para {} #foot-para {}；这样咱们就能够对以上2个段落进行须要的操作了。正因为ID选择器的唯一性，也使其用法变得绝对简略。
4、属性选择器
属性选择器在css2中引入，使咱们能够依据元素的属性及属性值来抉择元素。上面别离来阐明：
(1)简略属性选择器
简略的属性选择器能够使咱们依据一个元素是否蕴含某个属性来做出抉择。应用办法为: 元素名[属性名] 或 *[属性名]。比方咱们心愿抉择带有alt属性的所有img元素： img[alt] { ...}
抉择带有title属性的所有元素：*[title] { ...}。同类选择器相似，咱们也能够依据多个属性信息进行抉择，例如同时领有href和title的a元素：
a[href][title] { ...}组合应用类选择器使咱们的抉择更加富于灵活性。
(2)具体属性值选择器
如果咱们心愿更加准确地依据属性值来抉择元素，咱们能够在简略的属性选择器中指定属性的值。最简略的咱们心愿找到href属性值为http://www.baidu.com的锚元素：
a[href="http://www.baidu.com"] { font-weight: bold;}要特地留神的是，这里的具体值匹配本质上是一个字符串匹配，所以在这里对于class属性而言，词条的程序是有关系的。
p[class="warning important"] { ...}将不会匹配到<p class="important warning"></p>，也不会匹配到<p class="warning important mini-type">，这里就是一个僵硬的字符串匹配。
另外，想要同时匹配多个属性的值也是能够的：
p[class="warning"][title="para"] { ...}将匹配到类为warning(仅有warning)，title属性为para的p元素。
(3)局部属性值选择器
依据属性值来匹配元素无疑比简略的属性匹配更加精细化了，然而仿佛有些精细化过头了，字符串的齐全匹配显得过于僵硬。比方咱们心愿抉择在一串属性值中呈现了某个关键字的元素，无妨再次以class属性为例，咱们心愿抉择所有蕴含了warning类的p元素，属性值匹配将无奈做到，好在还是有方法的，咱们能够应用以下的局部值匹配选择器：
p[class~="warning"] { ...}该选择器在等号”=”后面增加了一个波浪号~，含意为蕴含前面的字串的匹配。以上代码将会抉择所有class属性中蕴含”warning”的p元素。为了更加分明地阐明问题，它和以下的选择器是等价的：
p.warning { ...}当然~=不仅仅只是用在class属性上，这只是一个示例。
再比如说，咱们的文档中蕴含一系列人物介绍的div元素：
<div title="intro 1">...</div><div title="intro 2">...</div><div title="intro 3">...</div>咱们能够应用以下的形式抉择所有人物简介div：div[title~="intro"] { ...}
不过遗憾的是<div title="animal intro">也将会被抉择进来，这是须要咱们特地留神的中央。
对于局部值选择器也有其局限性，它匹配的是由空格分隔的单词，如果咱们将下面的div写成上面的样子就会匹配失败：
<div title="intro-1">...</div><div title="intro-2">...</div><div title="intro-3">...</div>对于这种状况，咱们能够应用子串匹配属性选择器。规定如下：
l div[title^="intro"] {...} //title以intro结尾的div元素l div[title$="intro"] {...} //title以intro结尾的div元素l div[title*="intro"] {...} //title中蕴含"intro"子串的div元素举例来说：
a[href*="google."] {...}
将蕴含所有链接中蕴含”google.”的a元素。
div[title$="y"] {...}
将蕴含以下所有div元素：
<div title="cloudy">...</div>
<div title="snowy">...</div>
<div title="rainy">...</div>
能够看出局部值属性选择器的性能是非常弱小的。
5、派生选择器
派生选择器，乍一看名字不知所云，它又名上下文选择器，它是应用文档DOM构造来进行css抉择的。DOM构造在此不再赘述了，但为了更加分明地阐明问题，咱们这里给出一个DOM树作为参考：
(1)后辈选择器(descendant selector)
如上图，如果想要抉择body元素的所有li子元素，办法如下：
body li { ...}这里会抉择所有的li后辈，也就是图中的body下的所有li，不管他们之间相隔的代数有多少。同理，如果想要抉择h1元素下的span，能够应用以下代码：
h1 span { ...}如果咱们要抉择领有warning类的元素的li后辈，能够应用上面的办法：
.warning li { ...}当然，如果心愿只抉择领有warning类的div元素的li后辈，能够写作：
div.warning li { ...}由下面的例子不难看出，后辈选择器的规定就是用空格连贯2个或多个选择器。空格的含意为：…的后辈。多个选择器的状况如下： ul li li { ...}
这样，就会抉择所有ul下蕴含在li元素下的所有li元素了，听起来非常拗口，参考咱们的DOM树，会抉择到文档树种最初一排li元素。
(2)子元素选择器(child selector)
子元素选择器和后辈选择器不同，它只能抉择某元素的间接后辈，不能跨代选取，用法如下：ul > li { ...}
两个子元素两头用一个大于号>连贯。下面的代码会抉择到所有ul元素的间接li子元素。对应到DOM树中，所有的li元素都会被选中，起因是图中所有的li元素都是ul的子元素。
然而，以下代码将不会选中任何元素：
h1 > span { ...}因为span是h1的”孙子元素”，h1没有间接的span子元素，因此下面的代码将不会选到任何后果。其余方面和后辈元素相似，须要特地留神的就是子元素选择器不能隔代选取。
(3)相邻兄弟选择器(Adjacent sibling selector)
相邻兄弟选择器，故名思意将会选取某个元素的相邻兄弟元素，留神它选取的是相邻的兄弟元素而不是所有的兄弟元素，实际上选取的是紧跟在前面的兄弟元素。
相邻兄弟选择器在实践中有比拟不错的利用，例如，你想在一个h2题目前面的段落利用某种独到的款式或者心愿在某类p段落后的table上增加一个额定的边距等等。它的用法如下：
li + li { ...}以上代码会抉择所有作为li相邻元素的li元素，听起来又有点拗口，参考DOM树，它会抉择除了排在第一个li元素的其余4个li元素，因为2个排在第1的li元素没有更靠前的兄弟元素来抉择它。
再比方：h1 + p { ...} 会抉择所有紧跟h1前面的p兄弟元素。h1.warning + p { ...} 会抉择所有有用warning类的h1元素前面紧跟的p兄弟元素。
(4)几种派生选择器的联合应用
实际上，以上介绍的几种派生选择器能够联合应用，看上面的例子：
html > body li.warning + li { ...}下面的选择器含意为：html元素的body子元素中，所有领有warning类的li元素的相邻兄弟元素。