CSS學習筆記（二） --CSS選擇器

這章重點介紹CSS的選擇器 ，利用CSS可以建立易於修改和編輯的規則。

CSS規則結構：

CSS規則=選擇器+宣告塊，宣告塊由*個宣告組成，每個宣告是一個鍵值對。

選擇器：

• 標籤選擇器：通過標籤名來進行匹配：

p{
   color:white;
}

• 選擇器分組：可將有相同樣式的元素通過，隔開：

/*  文件中所有的p、div、h1元素都會被匹配上該樣式  */
p,div,h1{ 
	color:blue;
}

• 通配選擇器：萬用字元*可以與任何元素匹配 ：

/*  文件中所有的元素元素都會被匹配上該樣式  */
 

*{
   color:white;
}

• 類選擇器：可以用於作用於多個元素，通過設定標籤的class屬性：

<!-- HTML中 -->
<div class="class1">
	123456
</div>

/* CSS中 */
.class1{
   color:white;
}

另外一種用法：

<!-- HTML中 -->
<div class="class1">
	123456
</div>
<div class="class2">
	123456
</div>
 

<div class="class1 class2">
	123456
</div>
<p class="class1 class2">  <!--只有這裡的字型變成白色-->
	456789
</p>

/* CSS中 */
p.class1.class2{ 
   /* 翻譯為只有class同時包含class1和class2的p標籤才會被選中 */
   color:white;
}

• ID選擇器：僅使用一次，因為一個ID在HTML中只能出現一次（但是瀏覽器並不會檢測）。

<!-- HTML中 -->
<
 
div id="id1">
	123456
</div>

/* CSS中 */
#id1{
   color:white;
}