一，元素选择器

HTML元素是最典型的选择器类型，任何一个HTML元素都可以做为选择器。元素选择器的有效范围为页面中所有的、名称相同的HTML元素。

格式：元素 { 属性: 值; }

例如：h1 { color: red; } h2 { color: #FF0000; } 或者：h1, h2 { color: #ff0000; }

二，类选择器【重点】

如果想要把某一个样式应用到不同的HTML元素上，可以采用类选择器来定义，然后在不同标签中应用它们。

格式1： .类名 { 属性: 值; }

格式2：元素.类名 { 属性: 值; }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>类选择器示例1</title>
<style type="text/css">
.tt{ font-size:10pt; font-family:黑体; color:#800080; font-weight:bold; }
</style>
</head>
<body>
<p class="tt">示例一</p> /*p标签应用名字为tt的类层叠样式表*/
<h1 class="tt">示例二</h1> /*h1标签也应用名字为tt的类层叠样式表*/
</body>
</html>

三，ID选择器

除了使用类选择器的方式定义一个样式以外，还可以使用ID定义样式。ID与类选择器的概念相似，只是ID选择器只能被引用一次，而类选择器可以被多次引用。
格式：#id名 { 属性: 值; }

示例：#red { color: red; }

    <p id="red">欢迎使用id选择器</p>

四，后代选择器

如果需要为位于某个标记符内的元素设置特定的样式规则，则应将选择器指定为具有上下文关系的HTML标记

h1 b{ color:blue; } /注意h1和b之间以空格分隔/

五，属性和值选择器

下面的例子为带有 title 属性的所有元素设置样式：

[title]
{
color:red;
}

下面的例子为 title=“bjsxt” 的所有元素设置样式：

[title=bjsxt]
{
border:5px solid blue;
}

设置表单的样式

input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}

input[type="button"]
{
  width:120px;
  margin-left:35px;
  display:block;
  font-family: Verdana, Arial;
}

六，通配符选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通配置符选择器</title>
    <style type="text/css">
        /*
        通配符选择器
        语法格式：
            *{
                属性:值;
            }
        语法说明:
            *表示任意标签
        注意:
            1.在实际开发中，*因为通配任意标，而且不同浏览器，body存在间距，所以一般使用*处理间隙
        */
        *{
            margin: 0px;
            padding: 0px;
            background-color: brown;
        }
    </style>
</head>
<body>
</body>
</html>

七，交集选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交集选择器</title>
    <style type="text/css">
        /*
        交集选择器
        语法格式：
            元素名.类名{
                属性:值;
            }
            或者
            元素名#ID值{
                属性:值;
            }
         语法解释:
            1.交集符合选择器是由两个选择器直接构成的，其结果是二者元素范围的交集。
            2.其中第一个选择器必须是元素选择器，第二个选择器是ID选择器或者类选择器
            3.两个选择器中间不能有空格
        */
        p.classvalue{
            color:red; text-align:center;
        }
    </style>
</head>
<body>
    <div>
        <p class="classvalue">我是DIV中的P标签,class值为p1</p>
        <p>我是DIV中的P标签,没有class</p>
    </div>
</body>
</html>

八，并级选择器

1.<!DOCTYPE html>
2.<html lang="en">
3.<head>
4.    <meta charset="UTF-8">
5.    <title>并集选择器</title>
6.    <style type="text/css">
7.        /*
8.        并集选择器
9.        语法格式:
10.            选择器1,选择器2,...,选择器n{
11.                属性:值;
12.            }
13.        语法说明:
14.            1.并集选择器是由多个选择器组成,各个选择器之间使用英文的逗号(,)分隔。
15.            2.这多个选择器都会有这些CSS样式
16.        注意：
17.            1.在实际开发中并集选择器使用频率比较高。
18.            2.公共样式可以使用并集选择器抽离出来,这样精简CSS样式代码
19.        */
20.        div,p{
21.            width: 200px;
22.            height: 100px;
23.            border: 2px solid rebeccapurple;
24.        }
25.    </style>
26.</head>
27.<body>
28.    <div>
29.        我是div
30.    </div>
31.    <p>我是P标签</p>
32.</body>
33.</html>

九，子选择器

1.<!DOCTYPE html>
2.<html lang="en">
3.<head>
4.    <meta charset="UTF-8">
5.    <title>子类选择器</title>
6.    <style type="text/css">
7.        /*
8.        子类选择器
9.        语法格式:
10.            选择器1>选择器2{
11.                属性:值;
12.            }
13.        语法说明:
14.            1.子类选择器也是由多个选择器组成,各个选择器之间使用">"连接，其效果类似于后代选择器
15.        注意:
16.            子类选择器其作用类似于后代选择器,但是子类选择器其效率高于后代选择器,推荐使用
17.        */
18.        body>div{
19.            border: #ff858f 2px solid;
20.            height: 300px;
21.            width: 400px;
22.            background-color: #c7ffaf;
23.        }
24.    </style>
25.</head>
26.<body>
27.    <div>我是body中的div</div>
28.</body>
29.</html>

十，伪类选择器

1.<!DOCTYPE html>
2.<html lang="en">
3.<head>
4.    <meta charset="UTF-8">
5.    <title>伪类选择器</title>
6.    <style type="text/css">
7.        /*
8.        伪类选择器
9.        语法格式:
10.            初始化的样式
11.            a:link{
12.                属性:值;
13.            }
14.            鼠标点击过后的样式
15.            a:visited{
16.                属性:值;
17.            }
18.            鼠标放在上面的样式
19.            a:hover{
20.                属性:值;
21.            }
22.            鼠标按下时的样式
23.            a:active{
24.                属性:值;
25.            }
26.            注意：
27.                1.在CSS样式的定义中,a:hover 必须被置于 a:link 和 a:visited 之后，
28.                    顺序不对，有时样式会失效
29.                2.:hover属性适用于任何元素
30.                3.应当将相同的属性抽离出来,放在a标签选择器中
31.        */
32.        div{
33.            margin: 30% auto;
34.            height: 200px;
35.            width: 700px;
36.        }
37.        a:link{
38.            color: #ff858f;
39.            font-size: 20px;
40.            font-family: "Microsoft YaHei UI";
41.            text-decoration: none;
42.            margin: 20px;
43.        }
44.        a:hover{
45.            text-decoration: underline;
46.            color: #1bff4c;
47.            font-size: 25px;
48.            font-weight: bold;
49.        }
50.        a:active{
51.            color: red;
52.            text-decoration: none;
53.        }
54.        a:visited{
55.            color: aqua;
56.        }
57.        div.div2:link{
58.            background-color: #1bff4c;
59.            height: 200px;
60.            width: 200px;
61.        }
62.        div.div2:hover{
63.            background-color: #ff858f;
64.        }
65.    </style>
66.</head>
67.<body>
68.    <div>
69.        <a href="http://www.baidu.com">我是A标签1</a>
70.        <a href="#">我是A标签2</a>
71.        <a href="#">我是A标签3</a>
72.        <a href="#">我是A标签4</a>
73.    </div>
74.    <div class="div2">
75.        我是个DIV
76.    </div>
77.</body>
78.</html>