這篇“CSS類選擇器分為什么及怎么用”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“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ā)展的市場(chǎng)環(huán)境中,互促共生。

(1)單類選擇器

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

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

<p class="deadline">...</p>

<h3 class="deadline">...</h3>

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

p.deadline { color: red;}

h3.deadline { color: red;}

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

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

.deadline { color: red;}

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

.deadline { color: red;}

span.deadline { font-style: italic;}

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

(2)多類選擇器

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

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

class = "warning important"

class = "important warning"

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

.warning { color: red;}

.important { font-weight: bold;}

.warning.important { background: blue;}

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

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

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

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

當(dāng)前文章：CSS類選擇器分為什么及怎么用
瀏覽地址：http://jinyejixie.com/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)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)