1.元素选择器
“类型选择器匹配文档树中该元素类型的每一个实例”,如下定义的类型选择器将匹配文档中的所有p元素。
p{ background-color:green; }
2.CSS分组
选择器分组
假设希望 h2 元素和段落都有灰色。为达到这个目的，最容易的做法是使用以下声明：
p,h2{ color:gray; }
将 h2 和 p 选择器放在规则左边，然后用逗号分隔，就定义了一个规则。其右边的样式（color:gray;）将应用到这两个选择器所引用的元素。逗号告诉浏览器，规则中包含两个不同的选择器。如果没有这个逗号，那么规则的含义将完全不同。参见后代选择器。
通配符选择器
CSS2 引入了一种新的简单选择器 - 通配选择器（universal selector），显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。例如，下面的规则可以使文档中的每个元素都为红色：
*{ color : red; }
3.类选择器
CSS类选择器
要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。
.important {color:red;}
结合元素选择器
p.important{ color : red; }
选择器现在会匹配 class 属性包含 important 的所有 p 元素，但是其他任何类型的元素都不匹配，不论是否有此 class 属性。选择器 p.important 解释为：“其 class 属性值为 important 的所有段落”。
多类选择器
在上一节中，我们处理了 class 值中包含一个词的情况。在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。例如，如果希望将一个特定的元素同时标记为重要（important）和警告（warning），就可以写作：
<p class="important warning">
This paragraph is a very important warning.
</p>
接下来我们定义CSS样式
.important {font-weight:bold;} //class包含important类的元素应用此样式 。 .warning {font-style:italic;} //class包含warning类的元素应用此样式 。 .important.warning {background:silver;} //class同时包含important、warning类的元素应用此样式。
4.ID选择器
如下定义了一个ID选择器，用于匹配文档中ID属性等于div1的唯一元素。
#div1{ color : red; }
5.属性选择器
[attribute]:用于选取带有指定属性的元素
//把包含标题的所有元素变为红色
*[title] { color : red; }
[attribute=value] :选取等于特定属性值的元素，这种格式要求必须与属性值完全匹配。
a[title='w3school'] { color : red; }
[attribute~=value] :根据部分属性值选择，如果需要根据属性值中的词列表的某个词进行选择(词与词之间用空格分开)，则需要使用波浪号(~)
//会匹配class='important'的元素，也会匹配class='important error'的元素。
*[class~='important'] { color : red; }
<body> <span class="important">important</span> <span class="important error">important error</span> </body>
[attribue|=value]:选择属性值等于value或以value-开头的所有元素。
*[title|='en'] { color : red; }
因此，以下示例标记中的前三个元素将被选中，而不会选择后两个元素。
<body> <p title="en">Hello!</p> <p title="en-us">Hello!</p> <p title="en-cn">Hello!</p> <p title="fr">Hello!</p> <p title="cy-en">Hello!</p> </body>
[attribute^=value]:选择属性值以value开头的所有元素。
[attribute$=value]:选择属性值以value结尾的所有元素。
[attribute*=value]:选择属性值中包含子串value的所有元素。
6.后代选择器
h1 em { color : red; }
7.子元素选择器
h1 > strong {color:red;}
8.兄弟选择器
h1 + h2 { color:red; }
h1 ~ h2 { color:red; }
9.伪类
锚伪类(注意:必须以Love ,Ha的顺序来定义锚伪类)
a:link{ color:red; text-decoration:none; } a:visited{ color : gray; } a:hover{ text-decoration:underline; } a:active{ color : blue; }
first-child伪类
p:first-child { color : red; }
这个规则是把作为某元素第一个子元素的所有p元素设置为红色字体，最常用的错误是认为p:first-child选择器会选择p元素的第一个子元素。
focus伪类
input:focus { border : 1px red solid; }
10.伪元素
:first-line 用于向文本的首行设置特殊样式，只能用于块级元素。
p:first-line { color : red; }
:first-letter 用于向文本的首字段设置特殊样式，只能用于块级元素。
:before 用于在元素的内容前面插入新内容
p:before { content:'新内容' }
:after 用于在元素的内容末尾插入新内容