css選擇器(1)——元素選擇器、類名和id選擇器

時間 2019-11-17

標籤 css 選擇器元素欄目 CSS 简体版

原文原文鏈接

css的主要優勢之一就是它能很容易地向全部同類型的元素應用一組樣式。固然它是經過選擇器來實現這一點的。css

基本規則結構：html

語法= 選擇器 +聲明塊瀏覽器

1.元素選擇器——直接使用html元素名，指向文檔元素字體

　　若是想給全部段落都添加縮進的話使用元素選擇器是最好的選擇spa

p{
   text-indent:2em;  
}

2.類選擇器和id選擇器——獨立於文檔元素來指定樣式code

　　a)類選擇器：

　　給部分段落文本加粗，以及列表的某些項，這時可使用類選擇器來應用樣式而不須要像使用元素選擇器同樣考慮具體涉及的元素，只要事先給要指定樣式的元素添加相同的類名便可（給須要指定樣式元素的class屬性指定相同的值）。htm

　　選擇器寫法："."加上類名blog

.target{
    font-weight:bold;
}

　　b)多類選擇器：

　　一個元素能夠不僅有一個類名，class值還能夠包含一個詞列表，好比：class="first second"；文檔

<style>
    /*經過把兩個類選擇器連接在一塊兒，僅能夠選擇同時包含這些類名的元素,類名的順序能夠顛倒*/
    /*匹配class既有one又有two的段落，第三段和第四段的字體被設置成了粗的*/
    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選擇器：

　　你可能知道會在一個給定的文檔中會有一個ID值爲important的元素，可是你不知道這個最重要的東西是一個段落，一個短語，一個列表項仍是一個小節標題，你只知道每一個文檔中都會有這麼一個最重要的內容，它可能會出如今任何元素中，且只出現一次，那麼這種狀況下就可使用id屬性了。get

　　與class屬性不一樣，id屬性的一個值僅能夠賦給一個元素，若是有一個元素的id值爲one，那麼該文檔中其餘元素的id值都不能是one。（實際上瀏覽器通常不檢查html中id屬性的惟一性，你設置多個元素有相同的id屬性並不會報錯）

　　另外，與class屬性不一樣，id值不能爲詞列表。如：id='one two'是錯的。

　　選擇器寫法："#"加上id值。

<style>
    #one{
        font-weight: bold;
    }
</style>
<body>
        <p id='one'>利用id選擇器來指定樣式</p>
</body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。