1.分组

选择器分组

如h2, p {color: gray;}这样的一条css规则，将会分别作用于h2和p元素上，即应用于这两个选择器所引用的元素。这个逗号告诉浏览器，规则包含两个不同的选择器。

可以将任意多个选择器分组在一起。

通配选择器

* {color: white;}*号可以视为是一个通配符，这个选择器可以于任何元素匹配。使用这个选择器可以把文档中所有元素的color值都指定为white。

声明分组

like this: h2, p {color: gray; font: 18px;}（大括号内的是声明块，每个逗号与之前的一部分叫做声明）

注意: 对声明分组的时候，一定要在各个声明的最后使用分号。

2.类选择器和ID选择器

类选择器和ID选择器允许以一种独立于文档元素的方式来指定样式，这些选择器可以单独使用，也可以与其他元素选择器结合使用。

类选择器

要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。

如p.waning {font-weight: bold;}，选择器将会匹配class属性包含warning的所有p元素。

如.waning {font-weight: bold;}，选择器将会匹配class属性包含warning的所有元素。

多类选择器

通过把两个类选择器链接在仪器，仅可以选择同时包含这些类名的元素（类名的顺序不限）。

如.warning.urgent这样的选择器。

如果一个多类选择器包含类名列表（类名以空格分隔）中所没有的一个类名，匹配就会失败。

如p.warning.help {background: red;}。这个选择器将值匹配class包含warning和help的那些p元素。So，如果一个p元素的class属性中只有词warning和urgent，将不能被匹配到。不过，他能匹配以下元素:<p class="urgent warning help">Help me!!!</p>

id选择器

ID选择器引用元素id属性中的值。其前面有一个‘#’号区别于类选择器的'.'。

此外ID选择器不能结合使用，因为ID属性不允许有以空格分隔得词列表。

类选择器还是id选择器

可以为多个元素指定类，但是ID选择器只会匹配到一个元素（按照规则）。

3.属性选择器

根据是否有某属性选择

如h1[title] {color: red;}将会选择所有具有title属性得h1元素，并且不会考虑title属性的值是什么。

根据具体属性值选择

如h1[title="my"] {color: red;}将会选择所有具有title属性且值为"my"的h1元素。

根据部分属性值选择

如果属性能接受词列表（词之间用空格跟个），可以根据其中的任意一个词进行选择，如class属性。

p[class~="warning"] {color: red;}，注意选择器中的'~'波浪号，这将导致选择器根据元素属性值中出现的一个用空格分隔的词来完成选择。

特定属性选择类型

如`[lang|="en"] {color: red;}会选择lang属性等于en或者以en-开头的所有元素。最常见的用途是匹配语音值。

4.后代选择器

h1 em {color: red;}这个规则会把作为h1元素后代（不局限于子元素）的em元素的文本变为red。

在一个后代选择其中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符。每个空格结合符可以解释为......在......中找到、......作为......的一部分、......作为.....的后代；但是要求必须从右向左读选择器。因此【h1 em】可以解释为”作为h1元素后代的任何em元素“。

注意: 两个元素之间的层次间隔可以是无限的，不仅仅针对于父子关系。

5.选择子元素

如果指向选择一个元素的子元素而不是后代元素，可以使用子结合符，即大于号(>)。如h1 > strong {color: red;}，这个规则将会匹配作为h1子元素的所有strong元素变为red。

6.选择相邻兄弟元素

相邻兄弟结合符，一个+号。h1 + p {margin-top: 0;}代表去除紧接在一个h1元素后出现的段落的上边距。一个结合符只能选择两个相邻兄弟中的第二个元素。

7.伪类和伪元素

伪类选择器和伪元素选择器可以为文档中不一定具体存在的结构指定样式。

7.1伪类选择器

a:visited {coor: red;}会使已经访问过的锚颜色为红色。规则中的（:）冒号，是伪类或为元素的”名片“，所有伪类和为元素关键字前面都有一个冒号。

动态伪类

伪类的顺序

伪类的顺序很重要，推荐 link-visited-focus-hover-active

选择第一个子元素

:first-child这是一个静态伪类，如p:first-child {color: red;}将会选择一个元素，这个元素的第一个子元素使p元素，并且会使这个p元素的颜色变为red。

根据语言选择

*:lang(fr) {font-style: italic}会使所有法语元素变成斜体。

组合伪类

如a:link:hover; a:visited:hover这些选择器叫做组合伪类选择器。另外注意，这些顺序并不重要，但是要注意不要把互斥的伪类结合在一起使用。

7.2伪元素选择器

就像伪类为锚指定幻像类一样，伪元素能够在文档中插入假象的元素，从而得到某种效果。CSS2.1中定义了4个为元素：设置首字母样式、设置第一行样式、设置之前和之后的样式。

设置首字母样式

如p:first-letter {color: red;}用于设置一个块级元素首字母的样式，仅对该首字母有效。

这会导致用户代理对一个假想的元素做出响应，这个假想元素包含每一个p元素的第一个字母。可能如下所示：

<p>
    <p:first-letter>T</h2:first-letter>
    his is an paragraph element.
</p>

In other words，<p:first-letter>是一个伪元素。这个伪元素并不会出现在文档源代码中，它是由用户代理动态构造的，用于向相应文本块应用:first-letter样式。

设置第一行的样式

p:first-line {color: red;}这个样式应用于每一段所显示的第一行文本，不论显示区域多大或多小，都是如此。

:first-letter和:first-line的限制

css2.1等早期版本中会有一些如只能应用于块级元素的限制。

注意伪元素应出现在该伪元素的选择器的最后面。

设置之前和之后元素的样式

:before :after

如p: before {content: "%"; color: gray;}这个片段，将会显示如下图所示的效果，在数字98前面显示了一个%号。

又或者body: after {content: "the end.";}。