4-5. 類選擇器/多類選擇器

1、類選擇器允許以一種獨立于文檔元素的方式來指定樣式。
該選擇器可以單獨使用悲敷,也可以與其他元素結(jié)合使用究恤。
要應(yīng)用樣式而不考慮具體設(shè)計的元素,最常用的方法就是使用類選擇器后德。
作用:根據(jù)指定的類名稱找到對應(yīng)的標(biāo)簽, 然后設(shè)置屬性
注意:類名的第一個字符不能使用數(shù)字

2部宿、格式:
.類名{
屬性:值;
}
為了將類選擇器的樣式與元素關(guān)聯(lián),必須將 class 指定為一個適當(dāng)?shù)闹担?/p>

<h1 class="important">
This heading is very important.
</h1>

<p class="important">
This paragraph is very important.
</p>

在上面的代碼中探遵,兩個元素的 class 都指定為 important:第一個標(biāo)題( h1 元素)窟赏,第二個段落(p 元素)。
然后我們使用以下語法向這些歸類的元素應(yīng)用樣式箱季,即類名前有一個點號 .

.important {color:red;}

3涯穷、結(jié)合元素選擇器
類選擇器可以結(jié)合元素選擇器來使用,比如讓段落顯示為紅色文本:

p.important {color:red;}

選擇器現(xiàn)在會匹配 class 屬性包含 important 的所有 p 元素藏雏,但是其他任何類型的元素都不匹配拷况,不論是否有此 class 屬性。
選擇器 p.important 解釋為:“其 class 屬性值為 important 的所有段落”掘殴。
因為 h1 元素不是段落赚瘦,這個規(guī)則的選擇器與之不匹配,因此 h1 元素不會變成紅色文本奏寨。
如果你確實希望為 h1 元素指定不同的樣式起意,可以使用選擇器 h1.important:

p.important {color:red;}
h1.important {color:blue;}

4、多類選擇器
在 HTML 中病瞳,一個 class 值中可能包含一個詞列表( class 值而不是中包含一個詞的情況)揽咕,各個詞之間用空格分隔。
例如套菜,如果希望將一個特定的元素同時標(biāo)記為重要(important)和警告(warning)亲善,就可以寫作:

<p class="important warning">
謝謝閱讀我的簡書,歡迎關(guān)注逗柴!
</p>

這兩個詞的順序無關(guān)緊要蛹头,寫成 warning important 也可以。

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

上面的代碼的意思是:
class 為 important 的所有元素都是粗體
class 為 warning 的所有元素為斜體
class 中同時包含 important 和 warning 的所有元素有一個銀色的背景

還有一種是通過把兩個類選擇器鏈接在一起戏溺,僅可以選擇同時包含這些類名的元素(類名的順序不限)渣蜗。

.important.urgent {background:silver;}

這個選擇器將只匹配 class 屬性中包含詞 important 和 urgent 的 p 元素。因此于购,如果一個 p 元素的 class 屬性中只有詞 important 和 warning袍睡,將不能匹配。不過肋僧,它能匹配以下元素:

<p class="important urgent warning">
謝謝閱讀我的簡書斑胜,歡迎關(guān)注控淡!
</p>

5、注意點:

  • 每個HTML標(biāo)簽都有一個屬性叫做class, 也就是說每個標(biāo)簽都可以設(shè)置類名
  • 在同一個界面中class的名稱是可以重復(fù)的
  • 在編寫class選擇器時一定要在class名稱前面加上 .
  • 類名的命名規(guī)范和id名稱的命名規(guī)范一樣
  • 類名就是專門用來給CSS設(shè)置樣式的
  • 在HTML中每個標(biāo)簽可以同時綁定多個類名
    格式:<標(biāo)簽名稱 class="類名1 類名2 ...">
    錯誤的寫法:<p class="para1" class="para2">

6止潘、注意區(qū)分

.fancy td {
    color: #f60;
    background: #666;
    }

類名為 fancy 的元素掺炭,該元素內(nèi)部的表格單元都會以灰色背景顯示橙色文字。(名為 fancy的元素可能是一個表格或者一個 div等等)

td.fancy {
    color: #f60;
    background: #666;
    }

類名為 fancy 的表格單元凭戴,也就是表格里面有類名為fancy的表格涧狮,將是帶有灰色背景的橙色。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .choose{
               color: red;
               }
        .myheader{
                 font-size: 40px;
                 }
    </style>
</head>

<body>
<p class="choose">我是一個段落</p>
<h1 class="choose myheader">我是一個標(biāo)題</h1>

<!--
錯誤的寫法:
<h1 class="choose" class="myheader">我是一個標(biāo)題</h1>
-->

</body>

http://www.w3school.com.cn/css/css_selector_class.asp
http://www.w3school.com.cn/css/css_syntax_class_selector.asp

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末么夫,一起剝皮案震驚了整個濱河市者冤,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌档痪,老刑警劉巖涉枫,帶你破解...
    沈念sama閱讀 218,607評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異腐螟,居然都是意外死亡愿汰,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,239評論 3 395
  • 文/潘曉璐 我一進店門乐纸,熙熙樓的掌柜王于貴愁眉苦臉地迎上來衬廷,“玉大人,你說我怎么就攤上這事汽绢÷鸢希” “怎么了?”我有些...
    開封第一講書人閱讀 164,960評論 0 355
  • 文/不壞的土叔 我叫張陵宁昭,是天一觀的道長小腊。 經(jīng)常有香客問我,道長久窟,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,750評論 1 294
  • 正文 為了忘掉前任本缠,我火速辦了婚禮斥扛,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘丹锹。我一直安慰自己稀颁,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,764評論 6 392
  • 文/花漫 我一把揭開白布楣黍。 她就那樣靜靜地躺著匾灶,像睡著了一般。 火紅的嫁衣襯著肌膚如雪租漂。 梳的紋絲不亂的頭發(fā)上阶女,一...
    開封第一講書人閱讀 51,604評論 1 305
  • 那天颊糜,我揣著相機與錄音,去河邊找鬼秃踩。 笑死衬鱼,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的憔杨。 我是一名探鬼主播鸟赫,決...
    沈念sama閱讀 40,347評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼消别!你這毒婦竟也來了抛蚤?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,253評論 0 276
  • 序言:老撾萬榮一對情侶失蹤寻狂,失蹤者是張志新(化名)和其女友劉穎岁经,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體荆虱,經(jīng)...
    沈念sama閱讀 45,702評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡蒿偎,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,893評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了怀读。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片诉位。...
    茶點故事閱讀 40,015評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖菜枷,靈堂內(nèi)的尸體忽然破棺而出苍糠,到底是詐尸還是另有隱情,我是刑警寧澤啤誊,帶...
    沈念sama閱讀 35,734評論 5 346
  • 正文 年R本政府宣布岳瞭,位于F島的核電站,受9級特大地震影響蚊锹,放射性物質(zhì)發(fā)生泄漏瞳筏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,352評論 3 330
  • 文/蒙蒙 一牡昆、第九天 我趴在偏房一處隱蔽的房頂上張望姚炕。 院中可真熱鬧,春花似錦丢烘、人聲如沸柱宦。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,934評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽掸刊。三九已至,卻和暖如春赢乓,著一層夾襖步出監(jiān)牢的瞬間忧侧,已是汗流浹背石窑。 一陣腳步聲響...
    開封第一講書人閱讀 33,052評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留苍柏,地道東北人尼斧。 一個月前我還...
    沈念sama閱讀 48,216評論 3 371
  • 正文 我出身青樓,卻偏偏與公主長得像试吁,于是被迫代替她去往敵國和親棺棵。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,969評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 1.CSS 元素選擇器 最常見的 CSS 選擇器是元素選擇器熄捍。換句話說烛恤,文檔的元素就是最基本的選擇器。如果設(shè)置 H...
    饑人谷_小侯閱讀 863評論 0 1
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理余耽,服務(wù)發(fā)現(xiàn)缚柏,斷路器,智...
    卡卡羅2017閱讀 134,657評論 18 139
  • 學(xué)習(xí)CSS的最佳網(wǎng)站沒有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,060評論 0 1
  • Part 1 :盒模型(box model) "every element in web design is a ...
    野味狼果閱讀 759評論 1 11
  • 國家電網(wǎng)公司企業(yè)標(biāo)準(zhǔn)(Q/GDW)- 面向?qū)ο蟮挠秒娦畔?shù)據(jù)交換協(xié)議 - 報批稿:20170802 前言: 排版 ...
    庭說閱讀 10,975評論 6 13