2020-2-18 前端達人
CSS 選擇器分組
CSS選擇器分組,可以把定義相同屬性的不同標簽做為一組處理,縮短了CSS樣式編寫的時間和CSS樣式表的大小。
例如希望h2和p標簽的字體顏色都設(shè)置為黑色,則可以寫成:
h2,p{color:black;}
通過分組,可以將相同屬性的樣式“壓縮”在一起,這樣就可以得到更簡潔的樣式表。例如:
/ no grouping /
h1 {color:blue;}
h2 {color:blue;}
h3 {color:blue;}
h4 {color:blue;}
h5 {color:blue;}
h6 {color:blue;}
/ grouping /
h1, h2, h3, h4, h5, h6 {color:blue;}
當有多個標簽有相同屬性時,可以抽出相同屬性進行分組,不同的屬性另外書寫樣式。
除了使用標簽來進行相同標簽CSS選擇外,還可以使用類選擇器來選擇。
類選擇器前面使用符號.
(1)基本使用
為了將類選擇器的樣式與元素關(guān)聯(lián),必須將 class 指定為一個適當?shù)闹?。例如?br />
<h1 class="important">This heading is very important.</h1>
<p class="important">This paragraph is very important.</p>
在樣式表中定義:
.important {color:red;}
這樣定義后,class為important的h1和p標簽的字體顏色也就都是紅色。
(2)結(jié)合元素選擇器
類選擇器可以結(jié)合元素選擇器來使用。
例如,您可能希望只有段落顯示為紅色文本:
p.important {color:red;}
這個樣式表示的是,所有class為important ,且為p標簽的元素中的字體為紅色。其他標簽的無效。
(3)CSS 多類選擇器
一個標簽可以定義多class,則這個標簽有這多個class的所有屬性,例如:
<p class="important warning">This paragraph is a very
important warning.</p>
.important {font-weight:bold;}
.warning {color:red;}
例子中為p標簽定義了important和warning兩個class,所以p標簽的字體是加粗且字體顏色是紅色的。
————————————————
版權(quán)聲明:本文為CSDN博主「前端學習線路」的原創(chuàng)文章,遵循 CC 4.0 BY-SA 版權(quán)協(xié)議,轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/webxuexi168/article/details/104349157
藍藍設(shè)計的小編 http://m.820esy.cn