1.HTML标记定义
p{属性:属性值;属性1:属性1}
<p>...</p>
注：p可以叫做选择器，定义那个标记中的内容执行其中的样式。一个选择器可以控制若干个样式属性，他们之间需要用英文的分号隔开，最后一个可以不加分号。
示例代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>定义CSS样式（CSS选择器）</title>
5 <meta charset="UTF-8">
6 <style type="text/css">
7 p{
8 color:red;
9 font-size:30px
10 }
11 </style>
12
13 </head>
14 <body>
15 <p>昨天是七夕节！</p>
16 </body>
17 </html>
显示效果：
2.Class定义
.p{属性:属性值;属性1:属性值1}
<p class="p">...</p>
注：class定义是以"."开始
示例代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>定义CSS样式（CSS选择器）</title>
5 <meta charset="UTF-8">
6 <style>
7 .p{
8 background-color: red;
9 color:blue;
10 font-size:40px;
11 }
12 </style>
13 </head>
14 <body>
15 <p class="p">昨天是七夕节！</p>
16 </body>
17 </html>
显示效果：
与HTML标记定义联用：
示例代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>定义CSS样式（CSS选择器）</title>
5 <meta charset="UTF-8">
6 <style>
7 .p{
8 background-color: red;
9 color:blue;
10 font-size:40px;
11 }
12 .p p{
13 color:green;
14 font-size:50px;
15 }
16 </style>
17 </head>
18 <body>
19 <div class="p">
20 <p>昨天是七夕节！</p>
21 昨天是七夕节！昨天是七夕节！
22 </div>
23 </body>
24 </html>
显示效果：
3.ID定义
#p{属性:属性值;属性1:属性值1}
<p id="p">...</p>
注：ID定义是以"#"开始的。
示例代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>定义CSS样式（CSS选择器）</title>
5 <meta charset="UTF-8">
6 </head>
7 <style>
8 #p{
9 background-color: green;
10 color:red;
11 font-size:40px;
12 }
13 </style>
14 <body>
15 <p id="p">昨天是七夕节！</p>
16 </body>
17 </html>
显示效果：
ID定义与HTML标记定义联用
代码示例：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>定义CSS样式（CSS选择器）</title>
5 <meta charset="UTF-8">
6 </head>
7 <style>
8 #ppp{
9 background-color: green;
10 color:red;
11 font-size:40px;
12 }
13 #ppp p{
14 background-color: white;
15 color: blue;
16 font-size: 50px;
17 }
18 </style>
19 <body>
20 <div id="ppp">
21 <p>昨天是七夕节！</p>
22 昨天是七夕节！昨天是七夕节！
23 </div>
24 </body>
25 </html>
显示效果：
4.优先级问题
（1）ID > Class > HTML
（2）同级时选择离元素最近的一个
#p{color:red}
#p{color:#f60}
执行颜色为#f60的
示例代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>定义CSS样式（CSS选择器）</title>
5 <meta charset="UTF-8">
6 <style>
7 #ppp{color:blue}
8 .p{color: green;}
9 div{color: red;}
10 </style>
11 </head>
12 <body>
13 <div id="ppp" class="p">
14 昨天是七夕节！昨天是七夕节！
15 </div>
16 </body>
17 </html>
显示效果：
5.组合选择器（同时控制多个元素）
h1,h2,h3{font-size:14px;color:red;}
注：选择器组合可以使用“,”隔开
代码示例：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>定义CSS样式（CSS选择器）</title>
5 <meta charset="UTF-8">
6 <style>
7 h1,h2,h3,h4,p,.div{color:red}
8 </style>
9 </head>
10 <body>
11 <div>
12 <h1>昨天是七夕节！</h1>
13 <h2>昨天是七夕节！</h2>
14 <h3>昨天是七夕节！</h3>
15 <h4>昨天是七夕节！</h4>
16 </div>
17 <p>
18 昨天是七夕节！
19 </p>
20 <div class="div">
21 昨天是七夕节！
22 </div>
23 </body>
24 </html>
显示效果：
6.伪元素选择器
（1）a:link 正常链接的样式
示例代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>定义CSS样式（CSS选择器）</title>
5 <meta charset="UTF-8">
6 <style>
7 a:link{color:red}
8 </style>
9 </head>
10 <body>
11 <a href="http://www.baidu.com" target="_blank">百度</a>
12 </body>
13 </html>
（2）a:hover 鼠标放上去的样式
示例代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>定义CSS样式（CSS选择器）</title>
5 <meta charset="UTF-8">
6 <style>
7 a:hover{color:green}
8 </style>
9 </head>
10 <body>
11 <a href="http://www.baidu.com" target="_blank">百度</a>
12 </body>
13 </html>
（3）a:active 选择链接时的样式
示例代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>定义CSS样式（CSS选择器）</title>
5 <meta charset="UTF-8">
6 <style>
7 a:active{color:blue}
8 </style>
9 </head>
10 <body>
11 <a href="http://www.baidu.com" target="_blank">百度</a>
12 </body>
13 </html>
（4）a:visited 已经访问过的链接的样式
示例代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>定义CSS样式（CSS选择器）</title>
5 <meta charset="UTF-8">
6 <style>
7 a:visited{color:yellow}
8 </style>
9 </head>
10 <body>
11 <a href="http://www.baidu.com" target="_blank">百度</a>
12 </body>
13 </html>