css选择器(1)——元素选择器、类名和id选择器
css的主要優(yōu)點(diǎn)之一就是它能很容易地向所有同類型的元素應(yīng)用一組樣式。當(dāng)然它是通過(guò)選擇器來(lái)實(shí)現(xiàn)這一點(diǎn)的。
基本規(guī)則結(jié)構(gòu)：
語(yǔ)法= 選擇器 +聲明塊
1.元素選擇器——直接使用html元素名，指向文檔元素
如果想給所有段落都添加縮進(jìn)的話使用元素選擇器是最好的選擇
p{
text-indent:2em;
}
2.類選擇器和id選擇器——獨(dú)立于文檔元素來(lái)指定樣式
a)類選擇器：
給部分段落文本加粗，以及列表的某些項(xiàng)，這時(shí)可以使用類選擇器來(lái)應(yīng)用樣式而不需要像使用元素選擇器一樣考慮具體涉及的元素，只要事先給要指定樣式的元素添加相同的類名即可（給需要指定樣式元素的class屬性指定相同的值）。
選擇器寫法："."加上類名
.target{
font-weight:bold;
}
b)多類選擇器：
一個(gè)元素可以不只有一個(gè)類名，class值還可以包含一個(gè)詞列表，比如：class="first second"；
<style>
/*通過(guò)把兩個(gè)類選擇器鏈接在一起，僅可以選擇同時(shí)包含這些類名的元素,類名的順序可以顛倒*/
/*匹配class既有one又有two的段落，第三段和第四段的字體被設(shè)置成了粗的*/
p.one.two{
font-weight: bold;
}
</style>
<body>
<p class='one'>one</p>
<p class='two'>two</p>
<p class='one two'>one + two</p>
<p class='one two third'>one + two + third</p>
</body>
c)id選擇器：
你可能知道會(huì)在一個(gè)給定的文檔中會(huì)有一個(gè)ID值為important的元素，但是你不知道這個(gè)最重要的東西是一個(gè)段落，一個(gè)短語(yǔ)，一個(gè)列表項(xiàng)還是一個(gè)小節(jié)標(biāo)題，你只知道每個(gè)文檔中都會(huì)有這么一個(gè)最重要的內(nèi)容，它可能會(huì)出現(xiàn)在任何元素中，且只出現(xiàn)一次，那么這種情況下就可以使用id屬性了。
與class屬性不同，id屬性的一個(gè)值僅可以賦給一個(gè)元素，如果有一個(gè)元素的id值為one，那么該文檔中其他元素的id值都不能是one。（實(shí)際上瀏覽器一般不檢查html中id屬性的唯一性，你設(shè)置多個(gè)元素有相同的id屬性并不會(huì)報(bào)錯(cuò)）
另外，與class屬性不同，id值不能為詞列表。如：id='one two'是錯(cuò)的。
選擇器寫法："#"加上id值。
<style>
#one{
font-weight: bold;
}
</style>
<body>
<p id='one'>利用id選擇器來(lái)指定樣式</p>
</body>
總結(jié)
以上是生活随笔為你收集整理的css选择器(1)——元素选择器、类名和id选择器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 属性加密技术及基于属性的ABE算法的访问
- 下一篇： Docker容器基本使用