CSS 類選擇器怎么用?


CSS 類選擇器怎么用?類選擇器選擇有特定 class 屬性的 HTML 元素,類選擇器允許以一種獨立于文檔元素的方式來指定樣式,類選擇器可以單獨使用,也可以與其他元素結合使用,以英文句號”.” 來定義,舉例如下:

.hongse{color:red;}

范如樂這里用“紅色”的拼音hongse命名,設定這樣的樣式:屬性為顏色color,對應的值為紅色red。

如果你需要把這個hongse的樣式應用到某個元素,比如p標簽,那么你需要給這個p標簽寫上一個class=”hongse”:

<p class=”hongse”>范如樂把這個段落設置為紅色。</p>

顯示效果如圖:

css類選擇器效果圖示

當然,HTML 元素也可以引用多個類:

比如我用“居中”的拼音juzhong命名,設定這樣的樣式:屬性為text-align(水平對齊方式),對應的值center(居中)。

如果你需要把這個juzhong的樣式同時應用到某個元素,比如上面舉例的那個p標簽,那么你需要給這個p標簽寫上一個class=”hongse juzhong”:

<p class=”hongse juzhong”>范如樂把這個段落設置為紅色。</p>

顯示效果如圖:

css類選擇器組合效果圖示

從上圖可以看出,<p> 元素將根據 class=”hongse” 和 class=”juzhong” 進行樣式設置,變成紅色字體并且居中。

上例是包含關系,兩個樣式都應用,也可以設置成同時包含關系,舉例如下:

.juli1.juli2{color:red;}

這里設定了元素要同時包含class=”juli1 juli2″,如果是這樣<p class=”juli1 juli3″>則不匹配,但是如果是這樣<p class=”juli1 juli2? juli3″>則可以匹配到.juli1.juli2{color:red;}的樣式。

也就是說,通過把兩個類選擇器鏈接在一起,表示僅可以選擇同時包含這些類名的元素(類名的順序不限)。

這個時候,如果一個多類選擇器包含類名列表中沒有的一個類名,匹配就會失敗。

另外,你還可以指定某些特定的html元素:

如果你設置的某個類的樣式在應用到某些html元素的時候發生沖突,那么你還可以指定只有特定的html元素受這個類的影響,方法也很簡單,在樣式的前面加上html的元素命即可,舉例如下:

css類選擇器指定元素效果圖示

從截圖可以看到,h1元素被指定應用了類hongse的樣式,變成了紅色,而p元素雖然也命名了class=”hongse”,但是p元素沒有變成紅色。

轉載時需注明來源!首發:如樂建站之家;原文鏈接:
http://www.lmaocr.com/css/7963.html
如樂建站之家創始人——范如樂:

如樂建站之家創始人范如樂  聯系Q Q:349142701
  聯系微信:349142701
  聯系電話:13189611692

【如樂建站之家】由范如樂于2013年創建至今,立志于解決新手不會快速自己建網站的痛苦,讓你也能零基礎快速學會自己建網站!詳細教程點擊下圖:




熱門文章: