007 CSS基本選擇器
阿新 • • 發佈：2019-05-07
選擇 pan color 先後 ack size 類選擇器 技術分享 ima
復習。
一：類選擇器
1.多類名選擇器
使用場景：某個標簽上需要多個類進行描述。
多個類之間使用空格分開。
沖突的時候，和類名在html中的先後順序沒有關系，和css中的樣式的先後順序有關系。
2.案例
需求：將幾個div標為紅色，然後將第一個div還要字體變大為40.
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.效果
二：id選擇器
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>
3.效果
四：標簽選擇器
1.說明
標簽後面加選擇器
007 CSS基本選擇器