HTML+CSS Day05 基本CSS选择器复合CSS选择器与CSS继承性

Posted 2020-06-17

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML+CSS Day05 基本CSS选择器复合CSS选择器与CSS继承性相关的知识，希望对你有一定的参考价值。

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）类别选择器

　　　　　　　　.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选择器

　　　　　　　　#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）

以上是关于HTML+CSS Day05 基本CSS选择器复合CSS选择器与CSS继承性的主要内容，如果未能解决你的问题，请参考以下文章

css的复合选择器

web前端练习31----Css，选择器（基本选择器，复合选择器，属性选择器，伪类，伪元素，优先级，雪碧图练习）

CSS基础知识二复合选择器元素显示模式背景三大特性注释

css复合选择器都有哪些

CSS学习笔记——复合选择器