1. 首頁 > 生活百科 > >

day03-CSS( 四 )

生活百科day03-CSS


day03-CSS

文章插圖
5.4組合選擇器
  1. 組合選擇器可以讓多個選擇器共用同一個css樣式代碼
  2. 語法格式
    選擇器1,選擇器2,選擇器n{屬性:值;}
例子
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>組合選擇器</title><style type="text/css">.class01, #id01 {width: 300px;height: 100px;border: 2px solid paleturquoise;color: #ff7d44;}</style></head><body><h1 class="class01">Hello，北京</h1><h1 id="id01">hello，上海</h1></body></html>
day03-CSS

文章插圖
5.5優先級說明行內樣式優先級 > id選擇器優先級 > class選擇器優先級 > 元素選擇器優先級
例子
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>選擇器的優先級說明</title><style type="text/css">#id01 {color: purple;}#id02 {color: blue;}.class01 {color: red;}div {color: black;}</style></head><body><h3>選擇器的優先級說明</h3><!--行內樣式的優先級高于id選擇器--><div style="color: #25d2be" id="id01">一只貓貓在睡覺</div><!--id選擇器的優先級高于類選擇器--><div id="id02" class="class01">兩只貓貓在睡覺</div><!--類選擇器的優先級高于元素選擇器---><div class="class01">三只貓貓在睡覺</div></body></html>
day03-CSS

文章插圖
6.練習CSS 測驗 (w3school.com.cn)
【day03-CSS】

推薦閱讀