1.样式的基本规则

元素选择器

元素选择器（element selector）通常是HTML元素。

声明和关键字

声明的格式统一为属性: 值;的格式，一个声明块中可能有一个或多个声明，要注意的是如果声明中的属性或值有误，整个规则都将会被忽略（书上是这样写的，但实际上应该是只会忽略有问题的声明）。属性的值可以是多个关键字，关键字之间通常以空格分隔，有时也会用斜线或逗号。

2.分组

选择器和选择器分组

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

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

通配选择器

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

声明分组

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

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

2.类选择器和ID选择器

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

类选择器

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

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

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

注意：使用id选择器、类选择器、属性选择器、伪类、伪元素选择器时，如果没有使用元素选择器，那么将隐式蕴含通用选择器。

多类选择器

通过把两个类选择器相连在一起，可以选择同时包含这些类名的元素（类名的顺序不限）。

如.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选择器只会匹配到一个元素（按照规则）。

3.属性选择器

分类：简单属性选择器、精准属性值选择器、部分匹配属性值选择器

简单属性选择器（根据是否有某属性选择）

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

a[href][title] {font-weight: bold;}会将同时拥有href和title属性的HTML超链接元素设置为粗体

精准属性值选择器（根据具体属性值选择）

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

如h1[title="my" href="/test"] {color: red;}将会选择所有同时具有title属性且值为“my”以及href属性且值为“/test”的元素。

部分匹配属性值选择器（根据部分属性值选择）

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

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

不区分大小写标识符

如a[href$=".pdf" i]，CSS Selectors Level 4指明，在属性选择器结束方括号前加上i，将在匹配属性值时不区分大小写（注意是属性值而不是属性名）。

4.根据文档结构选择

后代选择器

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

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

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

选择子元素

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

选择相邻兄弟元素

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

一般兄弟组合器（General sibling combinator） ，

~ 组合器选择兄弟元素，即选择一个元素后面同属一个父元素的另一个元素，与相邻兄弟选择器的区别在于两个元素可以是相邻的也可以不是。
语法：A ~ B
例子：p ~ span 匹配同一父元素下，<p> 元素后的所有 <span> 元素。

7.伪类和伪元素

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

• 伪类用来描述一个元素的特殊状态，一般使用:开头
• 伪元素，表示页面中一些特殊的并不真实存在的元素（特殊的位置）

7.1伪类选择器

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

结构伪类

• 选择文档的根元素:root
• 选择空元素:empty，可以选择没有任何子代的元素（包括文本节点和空白文本）。
• 选择唯一子代:only-child。他所选择的元素是另一个元素的唯一子元素。p:only-of-type同类型是唯一的，即p元素只有一个，但可以有其它不同类型子元素（注意:only-of-type指的是同类型的元素而不是类或其他）。
• 选择第一个和最后一个子代:first-child、:last-child。:first-of-type、:last-of-type同类型第一个、或者最后一个。
• 选择每第n个子元素:nth-child、:nth-last-child（从后向前计算）；选择每第n个某种同类元素:nth-of-type、:nth-last-of-type

动态伪类

注：动态伪类可用于任何元素。

伪类的顺序

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

UI状态伪类

• :required 和 :optional：针对必需的或可选的表单控件。
• :valid 和 :invalid、:in-range 和 :out-of-range：针对表单控件，根据对其设置的表单验证约束，或范围内/范围外，是有效/无效的。
• :enabled 和 :disabled、:read-only 和 :read-write：针对启用或禁用的表单控件（例如，设置了 disabled HTML 属性），以及读写或只读的表单控件（例如，设置了 readonly HTML 属性）。
• :checked、:indeterminate 和 :default：分别针对被选中的复选框和单选按钮，处于不确定的状态（既不被选中也不被选中），以及页面加载时默认选择的选项（例如，一个设置了 checked 属性的 <input type\="checkbox">，或者一个设置了 selected 属性的 <option> 元素）。

:target伪类

与连接中的锚点有关如链接“www.baidu.com/search/#searchInput”，假如有一个这样的元素<div id="searchInput">，为div设置样式#searchInput:target {}，只有链接中有 ​#searchInput​时，样式才会生效。

否定伪类 :not

否定伪类：用以将符合条件的元素从选择器中去除

ul > li:not(:nth-child(3))将会选中ul的所有li子元素，除了第三个子元素。

注意：否定伪类不能嵌套使用，但可以串在一起使用。

根据语言选择

*:lang(fr) {font-style: italic}会使所有法语元素变成斜体。注意和属性选择符*[lang|"FR"]之间的区别，属性选择符选择的元素自身必须有lang属性才能匹配，而:lang伪类能匹配设定了语言的元素以及它的后代，因此这种情况下伪类选择器更加可靠。

结合伪类

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

7.2伪元素选择器

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

伪元素标准定义是双冒号开头的，如首字母::first-letter但是写单冒号也能用。

设置首字母样式

如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的限制

它们只能应用到块级元素上，不能应用到行内元素上。

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

另外，::first-letter和::first-line可以使用的CSS属性是有限制的，并不支持所有CSS属性。

::selection

设置鼠标选中的内容的样式。

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

::before ::after。分别表示元素开始和结束的位置。

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

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