CSS類選擇器分為什么及怎么用

這篇“CSS類選擇器分為什么及怎么用”文章的知識點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“CSS類選擇器分為什么及怎么用”文章吧。

成都創(chuàng)新互聯(lián)是一家集成都網(wǎng)站建設(shè)、做網(wǎng)站、網(wǎng)站頁面設(shè)計(jì)、網(wǎng)站優(yōu)化SEO優(yōu)化為一體的專業(yè)網(wǎng)站制作公司，已為成都等多地近百家企業(yè)提供網(wǎng)站建設(shè)服務(wù)。追求良好的瀏覽體驗(yàn),以探求精品塑造與理念升華,設(shè)計(jì)最適合用戶的網(wǎng)站頁面。合作只是第一步，服務(wù)才是根本,我們始終堅(jiān)持講誠信，負(fù)責(zé)任的原則，為您進(jìn)行細(xì)心、貼心、認(rèn)真的服務(wù),與眾多客戶在蓬勃發(fā)展的市場環(huán)境中,互促共生。

(1)單類選擇器

單純的元素選擇器似乎還過于粗糙了，比如我們希望在文檔中突出加粗顯示某種重要的內(nèi)容，例如稿件的截至日期。問題在于我們不能確定稿件的截至日期將會出現(xiàn)在哪種元素中，或者它可能出現(xiàn)在多種不同的元素中。這個時候，我們可以考慮使用類選擇器(class selector)。

要使用類選擇器我們需要首先對文件元素添加一個class屬性，比如截至日期可能會出現(xiàn)在以下元素中:

這樣我們就可以用以下方式使用類選擇器了：

p.deadline { color: red;}

h3.deadline { color: red;}

點(diǎn)號”.”加上類名就組成了一個類選擇器。以上2個選擇器會選擇所有包含”deadline”類的p元素和h3元素。而其余包含該屬性的元素則不會被選中。

如果我們省略.deadline前面的元素名，那么所有包含該類的元素都將被選中：

.deadline { color: red;}

通常情況下，我們會組合使用以上2者得到更加有趣的樣式：

.deadline { color: red;}

span.deadline { font-style: italic;}

以上代碼首先會對所有的包含deadline的元素字體設(shè)置為紅色，同時會對span元素中的文本添加額外的斜體效果。這樣，如果你希望某處文本擁有額外的斜體效果將它們放在<span></span>中就可以了。

(2)多類選擇器

在實(shí)踐的做法中，元素的calss屬性可能不止包含一個單詞，而是一串單詞，各個單詞之間用空格隔開。

比如某些元素包含一個”warning”類，某些元素包含一個”important”類，某些元素同時包含”warning important”類。屬性名出現(xiàn)的順序沒有關(guān)系：

class = "warning important"

class = "important warning"

以上2者是等價的。我們希望包含warning類的元素有一個醒目的紅色字體，包含important屬性的元素有一個加粗的字體顯示，而同時包含以上2中屬性的元素另外擁有一個藍(lán)色背景(不管還能不能看清文字了)，我們可以使用以下的css代碼：

.warning { color: red;}

.important { font-weight: bold;}

.warning.important { background: blue;}

當(dāng)然，第三條你也可以寫成： .important.warning { background: blue;} 和詞序沒有關(guān)系。說明一下，.warning會匹配所有包含warning屬性的元素，不管該元素還包含多少其他的屬性。.important同理。而.important.warning會匹配所有同時包含以上2種屬性的元素，不管該元素還包含多少其他的類，也不管他們在類列表中出現(xiàn)的順序，只要其中含有這2個屬性，則會被選擇進(jìn)來！

同樣地，多于多類選擇器，在前面加上元素名，則會匹配包含指定類名的指定元素，例如：p.warning.important {}

將會匹配同時包含warning和important屬性的p元素，其他同樣包含以上2類的元素則不會被選中。

以上就是關(guān)于“CSS類選擇器分為什么及怎么用”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前文章：CSS類選擇器分為什么及怎么用
瀏覽地址：http://muchs.cn/article22/iehicc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、響應(yīng)式網(wǎng)站、企業(yè)網(wǎng)站制作、網(wǎng)頁設(shè)計(jì)公司、外貿(mào)建站、App開發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容