本篇文章為大家展示了css中有哪些選擇器，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

為貢井等地區(qū)用戶(hù)提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及貢井網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為網(wǎng)站制作、成都做網(wǎng)站、貢井網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專(zhuān)業(yè)、用心的態(tài)度為用戶(hù)提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶(hù)的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

css選擇器介紹：

1、類(lèi)別（class）選擇器

類(lèi)選擇器根據(jù)類(lèi)名來(lái)選擇，前面以“.”來(lái)標(biāo)志。

示例：

.demoDiv{
color:#FF0000;
}

2、標(biāo)簽選擇器

一個(gè)完整的HTML頁(yè)面是有很多不同的標(biāo)簽組成，而標(biāo)簽選擇器，則是決定哪些標(biāo)簽采用相應(yīng)的CSS樣式。

在style.css文件中對(duì)p標(biāo)簽樣式的聲明如下：

p{
font-size:12px;
background:#900;
color:090;
}

3、ID選擇器

ID 選擇器可以為標(biāo)有特定 ID 的 HTML 元素指定特定的樣式。 根據(jù)元素ID來(lái)選擇元素，具有唯一性，這意味著同一id在同一文檔頁(yè)面中只能出現(xiàn)一次。

前面以”#”號(hào)來(lái)標(biāo)志，在樣式里面可以這樣定義：

#demoDiv{
color:#FF0000;
}

4、后代選擇器

后代選擇器也稱(chēng)為包含選擇器，用來(lái)選擇特定元素或元素組的后代，將對(duì)父元素的選擇放在前面，對(duì)子元素的選擇放在后面，中間加一個(gè)空格分開(kāi)。

<style>
.father.child{
color:#0000CC;
}
</style>
<p class="father">
黑色
<label class="child">藍(lán)色
<b>也是藍(lán)色</b>
</label>
</p>

5、子選擇器

請(qǐng)注意這個(gè)選擇器與后代選擇器的區(qū)別，子選擇器（child selector）僅是指它的直接后代，或者你可以理解為作用于子元素的第一個(gè)后代。而后代選擇器是作用于所有子后代元素。后代選擇器通過(guò)空格來(lái)進(jìn)行選擇，而子選擇器是通過(guò)“>”進(jìn)行選擇。

我們看下面的代碼：

Example Source Code

CSS：

#links a {color:red;}
#links > a {color:blue;}

HTML：

<p id="links">
<a href="#">HTML中文網(wǎng)</a>>
<span><a href="#">CSS布局實(shí)例</a></span>
<span><a href="#">CSS教程</a></span>
</p>

（學(xué)習(xí)視頻分享：css視頻教程）

6、偽類(lèi)選擇器

有時(shí)候還會(huì)需要用文檔以外的其他條件來(lái)應(yīng)用元素的樣式，比如鼠標(biāo)懸停等。這時(shí)候我們就需要用到偽類(lèi)了。以下是鏈接應(yīng)用的偽類(lèi)定義。

a:link{
color:#999999;
}
a:visited{
color:#FFFF00;
}
a:hover{
color:#006600;
}
/* IE不支持，用Firefox瀏覽可以看到效果 */
input:focus{
background:# E0F1F5;
}

7、通用選擇器

通用選擇器用*來(lái)表示。例如：

*{
font-size: 12px;
}

表示所有的元素的字體大小都是12px；同時(shí)通用選擇器還可以和后代選擇器組合。

8、群組選擇器

當(dāng)幾個(gè)元素樣式屬性一樣時(shí)，可以共同調(diào)用一個(gè)聲明，元素之間用逗號(hào)分隔。如：

p, td, li {
line-height:20px;
color:#c00;
}
#main p, #sider span {
color:#000;
line-height:26px;
}
.#main p span {
color:#f60;
}
.text1 h2,#sider h4,.art_title h3 {
font-weight:100;
}

使用群組選擇器，將會(huì)大大的簡(jiǎn)化CSS代碼，將具有多個(gè)相同屬性的元素，合并群組進(jìn)行選擇，定義同樣的CSS屬性，這大大的提高了編碼效率，同時(shí)也減少了CSS文件的體積。

9、相鄰?fù)x擇器

我們除了上面的子選擇器與后代選擇器，我們可能還希望找到兄弟兩個(gè)當(dāng)中的一個(gè)，如一個(gè)標(biāo)題h2元素后面緊跟了兩個(gè)段落p元素，我們想定位第一個(gè)段落p元素，對(duì)它應(yīng)用樣式。我們就可以使用相鄰?fù)x擇器。

10、屬性選擇器

您可以用判斷html標(biāo)簽的某個(gè)屬性是否存在的方法來(lái)定義css。

屬性選擇器，是根據(jù)元素的屬性來(lái)匹配的，其屬性可以是標(biāo)準(zhǔn)屬性也可以是自定義屬性

11、偽元素選擇器

所有偽元素選擇器都必須放在出現(xiàn)該偽元素的選擇器的最后面，也就是說(shuō)偽元素選擇器不能跟任何派生選擇器。

上述內(nèi)容就是css中有哪些選擇器，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享題目：css中有哪些選擇器
URL標(biāo)題：http://www.rwnh.cn/article0/jsdeio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、App開(kāi)發(fā)、品牌網(wǎng)站建設(shè)、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(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í)需注明來(lái)源： 創(chuàng)新互聯(lián)