007 CSS基本選擇器

時間 2019-12-05

標籤 css 基本選擇器欄目 CSS 简体版

原文原文鏈接

　　複習。css

一：類選擇器html

1.多類名選擇器字體

　　使用場景：某個標籤上須要多個類進行描述。spa

　　多個類之間使用空格分開。code

　　衝突的時候，和類名在html中的前後順序沒有關係，和css中的樣式的前後順序有關係。htm

2.案例blog

　　需求：將幾個div標爲紅色，而後將第一個div還要字體變大爲40.it

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         .red{
 8             color: red;
 9         }
10         .font20{
11             font-size: 40px;
12         }
13     </style>
14 </head>
15 <body>
16     <div class="red font20">多類名</div>
17     <div>多類名</div>
18     <div>多類名</div>
19     <div class="red">多類名</div>
20     <div>多類名</div>
21     <div class="red">多類名</div>
22     <div>多類名</div>
23 </body>
24 </html>

3.效果class

二：id選擇器meta

1.說明

　　使用#

三：通配符選擇器

1.通配符選擇器

　　* ：全部

　　？：一個的意思

2.案例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         * {
 8             color: red;
 9         }
10         
11     </style>
12 </head>
13 <body>
14     <div class="red font20">多類名</div>
15     <p>多類名</p>
16     <span>多類名</pan>
17 </body>
18 </html>