标签选择器
就是直接选择相同的标签进行属性设置（比如body，div，p，ul，li），例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标签选择器</title>
<style>
p
{
color:red;
text-align:center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>这个段落采用CSS样式化。</p>
</body>
</html>
id选择器
CSS 中 id 选择器以 “#” 来定义，HTML元素以id属性来设置id选择器。就是说，CSS会选择HTML中id同名的字进行属性设置。例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>id选择器</title>
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html>
class选择器（类选择器）
class 选择器用于描述一组元素的样式，可以在多个元素中使用。类选择器以一个点"."号显示，例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>class选择器</title>
<style>
p.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p>
</body>
</html>
全局选择器
只有一个 * ，通常用来初始化，例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全局选择器</title>
<style>
*
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">这个段落居中对齐</h1>
<p class="center">这个段落居中对齐。</p>
</body>
</html>
伪类选择器
CSS伪类是用来添加一些选择器的特殊效果。伪类选择器分为结构性、子元素、 UI、动态和其它伪类选择器。主要用到“ ： ”
:root
根元素选择器，选择文档中的根元素
:first - child
子元素选择器，选择元素中第一个子元素
:last-child
子元素选择器，选择元素中最后一个子元素
:only-child
子元素选择器，选择元素中唯一子元素
:only-of- type
子元素选择器，选择指定类型的唯一子 元素
:nth-child(n)
子元素选择器，选择指定N个子元素
: enabled
UI选择器，选择启用状态的元素
:disabled
UI选择器，选择禁用状态的元素
: checked
UI选择器，选择被选中input勾选元素
:default
UI选择器，选择默认元素
:valid
UI选择器，验证有效选择input 元素
:invalid
UI选择器，验证无效选择input元素
:required
UI选择器，有required属性选择元素
:optional
UI选择器，无required属性选择元素
:link
动态选择器，未访问的超链接元素
:visited
动态选择器，已访问的超链接元素
: hover
动态选择器，悬停在超链接上的元素
:active
动态选择器，激活超链接上的元素
: foucs
动态选择器，获取焦点的元素
:not
其他选择器，否定选择的元素
:empty
其他选择器，选择没有任何内容的元素
:lang
其他选择器，选取包含lang属性的元素
:target
其他选择器，选取URL片段标识指向元素
伪元素选择器
CSS中有如下四种伪元素选择器：
1）::first-line 为某个元素的第一行文字使用样式；
2）::first-letter 为某个元素中的文字的首字母或第一个字使用样式；
3）::before 在某个元素之前插入一些内容；
4）::after 在某个元素之后插入一些内容；
（伪元素选择器和伪类选择器还是有点分不清。。）
关系选择器
关系选择器就包括后代选择器、子选择器、相邻同胞选择器、同胞选择器。
后代选择器
当元素B嵌在元素A内部时，B就是A的后代。定义后代选择器时，外层的元素写在前面，内层的元素写在后面，中间用空格分隔。例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>后代选择器</title>
<style type="text/css">
ul em {
color:red; font-weight:bold;}
</style>
</head>
<body>
<ul>
<li>1
<ol>
<li>2</li>
<li>3</li>
<li>4
<ol>
<li>5</li>
<li>6<em>7</em></li>
<li>8</li>
</ol>
</li>
<li>9/li>
</ol>
</li>
<li>10</li>
<li>11</li>
</ul>
</body>
</html>
子选择器
选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>表示。例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>子选择器</title>
<style>
div>a{
color:red}
</style>
<body>
<div>
<a href="#">子元素1</a>
<p>
<a href="#">孙元素</a>
</p>
<a href="#">子元素2</a>
</div>
</body>
</html>
相邻同胞选择器
相邻同胞选择器语法：E + F，选择紧跟在某个元素的后面，且具有相同父亲的元素。
同胞选择器
同胞选择器语法：E～F，用于选择某元素后面的所有同胞元素。
