1.标签选择器：控制整体。
使用标签选择器，只需要输入标签的名称即可。
2.类选择器：精确控制。
假如你要指定一些相同的元素拥有不同的样式，可以给元素添加不同的类名，然后用类选择器来应用对应的样式。
任何使用类选择器呢？以下几点需要注意：
（1）所有类选择器的名称都必须以一个原点开头，如 .class 这个类。
（2）CSS只允许在类名称中使用字母、数字、连字符（-）、下划线（_）。
类选择器可以帮助你实现高度精确的设计变更。例如在网页中的<h2>标题设置样式，让该样式只用于某个<h2>标签，代码如下：
.special{ color：#FF0000;
font-family:”Monotype Corsiva”;
}
（3）圆点之后，名称必须以字母开头。
（4）类名区分大小写。
3.ID选择器：控制特殊的网页元素。
ID选择器的使用方法与类选择器类似，不同的是类选择器名称前是圆点，ID选择器名称前是#，并且ID选择器不能同名，
4.给标签组定义样式：
有时候网页需要能将同一种样式应用到不同元素的方法。一种方法是给每一个标题分别创建一种样式，但这种方法太过繁琐；第二种方法是使用群组选择器。
5.构建群组选择器：使多个选择器成为一个群，只需要创建一个用逗号分隔的选择器列表即可。假设要让所有的标题标签都设置成同一个颜色，可以创建如下代码：
h1, h2, h3, h4, h5, h6{ color: #red; }
6.通用选择器（ * ）：给几个不同的网页元素应用相同的样式属性时，除了可以考虑用群组选择器作为快捷的方法之外还可以考虑使用通用选择器（ * ）。*号是选择每一个标签的通用选择器的标志。
假设网页上所有的标签都要以粗体显示，这个群组选择器看起来是这样：
a, p, img, h1, h2, h3,......{ font-weight: bold; }
使用通用选择器方式为：
*{ font-weight: bold; }
7.如何给标签内的标签定义样式呢？CSS有一种东西叫：派生选择器。
派生选择器允许你根据它与其他标签之间的关系来给标签设置样式。
8. 在理解派生选择器之前先来理解一下一组嵌套的标签中各个标签的关系。
（1）祖先标签：当一个标签涵盖了另一个标签时，这个标签就是另一标签的祖先。
（2）派生标签：处在一个或多个标签内部的标签就是派生标签。
（3）父标签：父标签是离另一个标签最近的祖先。
（4）子标签：直接被另一个标签包围的标签就是子标签。
（5）同胞标签：同一个标签的子标签被称为同胞标签。
9.现在来看一看如何创建派生选择器吧。
假如你要给<h1>标签中的某个字显示为其他颜色。可以这样写代码：
h1 strong { color: red; }
这样color只会影响到h1标签中的strong标签里面的内容，而不会影响其他h1标签和strong标签。这就是派生选择器的写法。派生选择器可以包含两个以上的元素。
派生选择器常用于格式化代码模块。
10.伪类和伪元素：
有时候你需要选择本身没有标签，但任然易于识别的网页的部位，比如段落首行或鼠标滑到过的链接。CSS提供了一些选择器：伪类和伪元素。
（1）给链接定义样式：有4个伪类可以让你根据访问者与该链接的交互方式，将链接设置成4种不同的状态之一。
a: link 是指访问者还没有访问到、鼠标也尚未滑过或单击过的所有链接，这是正常的、未访问过的网页链接。
a: visited是指依据Web浏览器的历史记录，访问者之前已经单击过的链接。
a: hover 让你在访问者的鼠标滑过链接时改变该链接的展现效果。如果想应用于特定类，只需要创建一个名为 .highlight: hover的样式即可。
a: active 让你决定当访问者单击时链接的展现效果。
（2）给段落定义样式：CSS提供了两个伪元素：first-letter和：first-line。：first-letter可以创建下落的首字母，或者首字母大写。：first-line可以用一种不同的颜色定义段落的首行。
（3）更多的伪类和伪元素：
：focus 与：hover极为相似。：focus是在访问者执行某些动作时起作用（如单击或tab键），：hover是在访问者的鼠标经过时起作用。例如，下面的样式是给访问者单击或跳格进入的任意文本框添加一种浅黄色：
input：focus{ background-color：#FFFFCC; }
：before可以在指定的元素前添加内容。例如：假设要将“HOT TIP”放在某些段落之前可以这么做：
首先，创建一个类< p class=”tip”>然后，把消息文本添加到样式表中：p.tip:before{content:”HOT TIP”;}每当浏览器遇到P标签中的.tip类时，都会忠实的在该段落前插入文本“HTO TIP!”用这个选择器添加文本的技术叫做“创造内容”。
：after 是与：before相对的，在文本后面添加内容。
：：selection 这个选择器是针对访问者已经在网页上选中的项目。例如，如果想让被选中的文本变成白色并且带有紫色背景可以使用如下样式：
：：selection{
color：#FFFFFF；
background-color：#993366；
}
该选择器只能设置color与background-color这两个属性。注意这个选择器是双冒号。
11.属性选择器：属性选择器可以挑选带有特殊属性的标签。例如：下面是如何使用title属性选择所有<img>标签的方法：
img[title]
选择器 a[href^=”http://”] 中 ^= 表示以…开始，这个选择器的意义是应用样式于所有以 “http://”开头的链接。相对的，a [href$=”.pdf”] 中 $= 表示以…结尾，它的意义是应用样式于所有以.pdf结尾的文档。
还有一种img[src*=”headshot”]表示选择src属性中带有“headshot”一词的所有图片。
12.子选择器：用子选择器可以给另一个标签的子标签设置样式。例如：选择body>h1 将选择<body>标签子标签中的所有<h1>标签。
：first-child伪元素能够让你只选择和格式化该元素中的第一个字标签。例如，选择第一个<h1>标签，可以创建一个这样的选择器：h1:first-child 。相对的，：last-child选择最后一个子标签。例如，为了给一个列表中的最后一个项目设置样式，可以使用ul li :last-child。nth-child是一个复杂但是非常有用的选择器。可以将表格隔行设置不同样式。这个选择器要用一个值来确定要选择哪一个子元素。最容易的方法是使用一个关键字：odd或even，它可以帮助你选择其他的奇数或者偶元素。例如，给一个表格中的每一个偶数行设置一种背景颜色，给每一个奇数行设置另一种背景颜色，可以像下面这样编写：
tr:nth-child(odd) { background-color: #D9F0FF; }
tr:nth-child(even){ background-color: #FFFFFF; }
又假设你要在一个行中，从第二个表格单元开始，每三个表格单元就高亮显示一次，下面就是实现这种效果的一个样式：tr td:nth-child(3n+2) { background-color:#900;}
在n之前的数字，基本上就是表示你想要哪一个子元素。因此，3n就表示每三个元素，4n就是表示；每四个元素。+后面再跟一个数字表示从第几个子元素开始。
13.子类型选择器：
（1）：first-of-type 与：first-child类似。假设一个sidebar元素，它的一个类名sidebar。为了给这个侧边栏的第一个段落定义样式，就可以使用这个选择器：
.sidebar p:first-of-type （p 表示你想要进行格式化的标签）
（2）：last-of-type 与：last-child类似。想要给侧边栏的最后一个段落定义样式可以这么写
. sidebar p:last-of-type （这个类型选择器必须是一个特殊标签的子标签）
（3）：nth-of-type 这个选择器的作用与：nth-child（）相似，只不过它应用于具有特定标签的交替子标签。假设你想要让那些图片交替地向左浮动和向右浮动，就可以用下面的两个样式来完成：
img:nth-of-type(odd) { float: left; }
img:nth-of-type(even) { float: right; }
14.同胞选择器：相邻同胞选择器用（+）把一个元素与下一个元素连接起来。
同胞组合选择器用（~）把这个类型中的所有同胞标签都选中。
15. ：not()选择器，也被称作否定伪类，可以帮助你选择不是其他东西的某件东西。例如： p: not( .classy){ color: blue; } 表示除了classy类的段落之外的所有段落的文本颜色都变成蓝色。：not()选择器具有以下局限性：
（1）用：not()选择器只能使用简单的选择器。
（2）不能使用派生选择器、伪类元素、群组选择器或其组合。
（3）不能使用多个:not()选择器。