1.基本CSS选择器
（1）标记选择器
<style>
h1{ color:red; font-size:25px;}
</style>
例：
1 <html>
2 <head>
3 <title>标记选择器</title>
4 <style type="text/css">
5 h2{background-color:red;color:blue;text-align:center;}
6 p{background-color:blue;color:red;text-align:center;width:300px;height:300px;line-height:300px;}
7 </style>
8 </head>
9 <body>
10 <h2>这是标记选择器</h2>
11 <p>标记选择器的段落</p>
12 </body>
13 </html>
（2）类别选择器
<style type="text/css">
.p1{background-color:red;color:blue;text-align:center;width:300px;height:300px;line-height:300px;}
</style>
例：
1 <html>
2 <head>
3 <title>类别选择器</title>
4 <style type="text/css">
5 h2{background-color:red;color:blue;text-align:center;}
6 .p1{background-color:red;color:blue;text-align:center;width:300px;height:300px;line-height:300px;}
7 .p2{background-color:blue;color:red;text-align:center;width:300px;height:300px;line-height:300px;}
8 </style>
9 </head>
10 <body>
11 <h2>这是类别选择器</h2>
12 <p class="p1">类别选择器的段落！</p>
13 <p class="p2">段落！</p>
14 </body>
15 </html>
（3）ID选择器
<style type="text/css">
#p1{background-color:blue;color:red;text-align:center;width:300px;height:300px;line-height:300px;}
</style>
例：
1 <html>
2 <head>
3 <title>id选择器</title>
4 <style type="text/css">
5 h2{background-color:red;color:blue;text-align:center;}
6 #p1{background-color:blue;color:red;text-align:center;width:300px;height:300px;line-height:300px;}
7 #p2{background-color:red;color:blue;text-align:center;width:300px;height:300px;line-height:300px;}
8 </style>
9 </head>
10 <body>
11 <h2>这是id选择器</h2>
12 <p id="p1">段落</p>
13 <p id="p2">这是一个段落</p>
14 </body>
15 </html>
2.复合CSS选择器
（1）“交集”选择器
h3.class{color:red;font-size:25px;}
例：
1 <html>
2 <head>
3 <title>交集选择器</title>
4 <style type="text/css">
5 p.p1{color:yellow;}
6 p{color:green;font-size:10px;}
7 .p1{color:blue;}
8 h2{color:red;font-size:14px;}
9 </style>
10 </head>
11 <body>
12 <h2>这是标题</h2>
13 <p class="p1">段落1</p>
14 <p>段落2</p>
15 </body>
16 </html>
（2）“并集”选择器
.class,h3{color:red;fon-size:25px;}
（3）
时间： 2024-10-22 16:32:23