css選擇器(1)——元素選擇器、類名和id選擇器
阿新 • • 發佈：2018-02-21
span pan 包含 最重要的 通過 font 給定 情況 但是
css的主要優點之一就是它能很容易地向所有同類型的元素應用一組樣式。當然它是通過選擇器來實現這一點的。
基本規則結構：
語法= 選擇器 +聲明塊
1.元素選擇器——直接使用html元素名，指向文檔元素
如果想給所有段落都添加縮進的話使用元素選擇器是最好的選擇
p{ text-indent:2em; }
2.類選擇器和id選擇器——獨立於文檔元素來指定樣式
a)類選擇器：
給部分段落文本加粗，以及列表的某些項，這時可以使用類選擇器來應用樣式而不需要像使用元素選擇器一樣考慮具體涉及的元素，只要事先給要指定樣式的元素添加相同的類名即可（給需要指定樣式元素的class屬性指定相同的值）。
選擇器寫法："."加上類名
.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屬性了。
與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>
css選擇器(1)——元素選擇器、類名和id選擇器