一、元素（类型）选择器
最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：
html {color:black;} h1 {color:blue;} h2 {color:silver;}
在 W3C 标准中，元素选择器又称为类型选择器（type selector）。
“类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。”
因此，我们也可以为 XML 文档中的元素设置样式：
XML 文档：
<?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/css" href="note.css"?> <note> <to>George</to> <from>John</from> <heading>Reminder</heading> <body>Don't forget the meeting!</body> </note>
CSS 文档：
note { font-family:Verdana, Arial; margin-left:30px; } to { font-size:28px; display: block; } from { font-size:28px; display: block; } heading { color: red; font-size:60px; display: block; } body { color: blue; font-size:35px; display: block; }
通过上面的例子，您可以看到，CSS 元素选择器（类型选择器）可以设置 XML 文档中元素的样式。
二、id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
以下的样式规则应用于元素属性 id="para1":
#para1 { text-align:center; color:red; }
ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
三、class 选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
.center {text-align:center;}
你也可以指定特定的HTML元素使用class。
在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:
p.center {text-align:center;}
类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
四、分组选择器
在样式表中有很多具有相同样式的元素。
h1 { color:green; } h2 { color:green; } p { color:green; }
为了尽量减少代码，你可以使用分组选择器。
每个选择器用逗号分隔。
在下面的例子中，我们对以上代码使用分组选择器：
h1,h2,p { color:green; }
五、嵌套选择器
它可能适用于选择器内部的选择器的样式。
在下面的例子设置了三个样式：
- p{ }: 为所有 p 元素指定一个样式。
- .marked{ }: 为所有 class="marked" 的元素指定一个样式。
- .marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
- p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。
p { color:blue; text-align:center; } .marked { background-color:red; } .marked p { color:white; } p.marked{ text-decoration:underline; }
六、CSS 组合选择符
1、后代选择器(以空格分隔)
后代选择器用于选取某元素的后代元素。
以下实例选取所有 <p> 元素插入到 <div> 元素中:
div p { background-color:yellow; }
2、直接子元素选择器(以>大于号分隔）
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
以下实例选择了<div>元素中所有直接子元素 <p> ：
div>p { background-color:yellow; }
3、相邻兄弟选择器（以+加号分隔）
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素:
div+p { background-color:yellow; }
4、后续兄弟选择器（以~破折号分隔）
后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。
以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> :
div~p { background-color:yellow; }
七、属性选择器
注意：IE7和IE8需声明!DOCTYPE才支持属性选择器！IE6和更低的版本不支持属性选择器。
- "value 是完整单词" 类型的比较符号: ~=, |=
- "拼接字符串" 类型的比较符号: *=, ^=, $=
下面的例子是把包含标题（title）的所有元素变为蓝色：
[title] { color:blue; }
1、属性值等于value
下面的实例改变了标题title='runoob'元素的边框样式:
[title=runoob] { border:5px solid green; }
2、属性中包含 value:
1、[attribute~=value] 属性中包含独立的单词为 value，例如：
[title~=flower] --> <img src="/i/eg_tulip.jpg" title="tulip flower" />
2、[attribute|=value] 属性中必须是完整且唯一的单词，或者以 - 分隔开：
下面是包含指定值的lang属性的元素样式的例子，使用（|）分隔属性和值:
[lang|=en] { color:blue; }
3、[attribute*=value] 属性中包含字符串，作字符串拆分只要能拆出来 value 这个词就行，例如：
[title*=flower] --> <img src="/i/eg_tulip.jpg" title="ffffflowerrrrrr" />
3、属性中以value首尾:
1、[attribute^=value] :attribute 属性以 value 开头
[lang^=en] --> <p lang="ennn">
2、[attribute$=value]:attribute 属性以 value 结尾
a[src$=".pdf"]
属性选择器样式无需使用class或id的形式:
input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; } input[type="button"] { width:120px; margin-left:35px; display:block; }