css样式表乍一看挺简单的，但是你随便下载一个实例，哇，这都啥啊，点点划划的看不懂……还是继续学习吧！前面说过了，CSS 语法规则就是：选择器+声明。那我们就首先看看有哪些选择器吧。
目录
1 标签选择器
标签选择器也称为元素选择器，是指直接使用HTML标签作为选择器名称。
html {background-color: black;} /*整个文档添加黑色背景*/
p {font-size: 30px; backgroud-color: gray;} /*所有段落文档字体大小设为30px并添加灰色背景*/
h2 {background-color: red;} /*对文档所有h2标题添加红色背景*/
也可以同时对多个HTML元素进行声明，这种选择器也叫做”分组选择器“：
h1, h2, h3, h4, h5, h6, p {font-family: 黑体;}
如果想选取所有的元素，可以使用通配符 * ，表示该选择器可以与任何元素匹配：
* { font-size: 20px;} /*所有元素的字号都为20px,对于不含该属性的元素则无效*/
2 类选择器
我们现在每天看到各种各样的网页，不难发现，通过标签定义样式实在是太粗糙了。对于同一种HTML元素，我们也有不同的要求，比如为了突出或者为了美观。这个时候，我们可以考虑使用类选择器(class selector)。
要使用类选择器我们需要首先对HTML文件中的元素添加class属性，比如我们想强调和截止日期有关的内容，就可以对相关的内容设置类：
<p class="deadline">...</p>
<h2 class="deadline">...</h2>
之后，在对应的样式表中设定样式：
p.deadline { color: red;}
h2.deadline { color: red;}
点号”.”加上类名就组成了一个类选择器。注意：类选择器定义时，名称不能以数字开头。
如果我们省略.deadline前面的元素名，就相当于统一选中了所有包含该类的元素：
.deadline { color: red;}
通常情况下，我们会组合使用以上2者得到更加有趣的样式，这也就是”嵌套选择器“：
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
p.marked{
text-decoration:underline;
}
上面的例子效果如下，刚开始看有些绕，多试试吧：
- p{ }: 为所有 p 元素指定一个样式。
- .marked{ }: 为所有 class="marked" 的元素指定一个样式。
- .marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
- p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。
需要注意的是，一个元素可以同时包含多个class。比如我们在css文件中定义两个类：
.warning { color: red;}
.important { font-weight: bold;}
对于HTML中的元素，可以同时包含这两个类的性质，各个类名之间用空格隔开，且与顺序无关：
<p class="warning important">...</p>
<p class="important warning">...</p>
有时候，两种类的叠加效果可能不大好，比如字的颜色和背景颜色不匹配啊之类的，那么我们还可以重新写这样的”复合属性“：
.warning { color: red;}
.important { font-weight: bold;}
.warning.important { font-style: italic;}
.important.warning { font-style: italic;}
对于上面这样的代码，可以这样解释：带有warning属性的元素字体为红色，带有important属性的元素字体会加粗，而同时具有warning和important的文字，会加粗（important属性）、字体为红色（warning属性）并添加变成斜体（important和warning属性同时存在）。后两行代码是等效的，也就是说设置多个属性的类也和词序没有关系。
同样的，也可以在前面加上元素名，匹配包含指定类名的指定元素，譬如 p.warning.important {}。
另外，如果我们再做如下的定义：
.important.urgent {background:silver;}
这个选择器将只匹配 class 属性中包含词 important 和 urgent 的元素。所以之前提到的只有important、warning属性的元素，使不能匹配的，但是它可以匹配以下元素：
<p class="important urgent warning">...</p>
3 id选择器
ID选择器和类选择器有些类似，id选择器使用自定义名称，以 # 号作为前缀，在HTML中通过标签的id属性进行名称匹配。
比如，在HTML中，我们可以给某个元素指定一个id：
<div id="page">...</div>
在CSS定义样式：
#page {
position: relative;
overflow-x: hidden;
width: 100%;
height: 100%;
}
id属性和class属性的差别十分显著：
- 一个元素只能拥有一个唯一的ID属性，但是可以拥有多个class属性（再强调一下：空格分割，顺序无关）。
- 一个ID值在一个HTML文档中只能出现一次，也就是一个ID只能唯一标识一个元素(不是一类元素，而是一个元素)。
我感觉，id属性比较适合特殊的元素，没有特殊需求的时候，为了重用和命名方便，使用class属性是比较好的。
还有一个值得注意的地方：
类选择器和 ID 选择器可能是区分大小写的。这取决于文档的语言。
4 属性选择器
属性选择器，是指为拥有指定属性的HTML元素设置样式。
看教程的时候有一个说明，帖上来：
只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。
4.1 [attribute]
属性选择器，如下所示，表示选择所有带有title属性的元素：
[title]{color:red;}
可以指定具有属性的元素种类，下面的例子表示将选择带有href属性的HTML 超链接的文本设置为红色：
a[href] {color:red;}
这个例子表示修改所有带有 alt 属性的图像的border样式，常用来突出显示图像：
img[alt] {border: 5px solid red;}
也可以同时指定多个属性，下面的例子表示将选择同时带有href属性和title属性的HTML 超链接的文本设置为红色：：
a[href][title] {color:red;}
4.2 [attribute=value]
属性和值选择器，当属性与属性值必须完全匹配时应用样式。如下所示，表示选择所有 title 属性为 flower 的元素：
[title=flower]{border:5px solid blue;}
下面这个例子表示将指向某个指定文档的超链接变成红色：
a[href="https://blog.csdn.net/qq_45427038"] {color: red;}
也可以同时使用多个属性-值选择器：
<a href="https://blog.csdn.net/qq_45427038" title="M&Q">小仙女的博客</a>
4.3 [attribute~=value]
下面的例子为包含指定值的 title 属性的所有元素设置样式，适用于由空格分隔的属性值：
[title~=flower]{border:5px solid blue;}
这里有一个比较好的例子，可以直观的看一下：
4.4 [attribute |= language]
这是一种适用于由连字符分割的属性值的选择器，下面的例子表示lang属性以 en 为开头的所有元素：
[lang|=en] { color:red; }
4.5 其他
属性选择器还有一些用法，就随便列一下，不展开说了：
再提一下，属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：
5 后代选择器
后代选择器（descendant selector）又称为包含选择器，可以选择作为某元素后代的元素。我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。
比如，下面这个例子，就是只对 h1 元素中的 em 元素应用样式，而不会影响其他地方的 em 元素：
h1 em {color:red;}
tips:
- 需要注意选择器的解读顺序！！
- 后代选择器中，两个元素之间的层次间隔可以是无限的！！！
6 子元素选择器
和后代选择器相反，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：
h1 > strong {color:red;}
子选择器使用了大于号 >（子结合符），选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素”。
子选择器也可以和后代选择器结合起来，但是我觉得这样太复杂了，就不多说了，有兴趣的自己看吧。
7 相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。相邻兄弟选择器使用加号（+）表示，即相邻兄弟结合符（Adjacent sibling combinator）。
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
h1 + p {margin-top:50px;}
这种表示方法只对h1后的段落有效，而不影响其他地方的段落。
8 伪类 (Pseudo-classes)
CSS 伪类用于向某些选择器添加特殊的效果，也就是根据不同的状态来显示不同的样式。伪类的语法如下：
selector : pseudo-class {property: value}
举个例子，默认的超链接为蓝色，带下划线，可以设置伪类更改其不同状态下的样式：
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
还有其他内容，在这里就不展开了，用到的时候再补充吧：
9 伪元素 (Pseudo-elements)
伪元素用于向某些选择器设置特殊效果，它的语法为：
selector:pseudo-element {property:value;}
