一、元素選擇器
文檔元素為最基本的選擇器
示例：
<!--css-->
p{
color: #00CCFF;
}
<!--html-->
<p>css選擇器示例</p>
p標簽內的字體顏色改變了
二、id選擇器
id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式;id 選擇器以 "#" 來定義。
示例：
<!--css樣式-->
#red {
color:red;
}
<!--html代碼-->
水果種類
<ul>
<il><strong>蘋果</strong></li>
<li id="red">香蕉</li>
<li>李子</li>
</ul>
只有“香蕉”字體顏色為紅色
id 屬性只能在每個 HTML 文檔中出現一次，并且區分大小寫
三、類選擇器
類選擇器以一個點號顯示，使用class設置類名
示例：
<!--css-->
.fo{
color: #00AA88;
}
<!--html-->
食品
<ul class="fo">
<li>鍋巴</li>
<li>方便面</li>
</ul>
類為fo的列表文字顏色改變
?
更多：
- 結合元素選擇器
<!--css-->
p.important {color:red;}
<!--html-->
<p class="important"> 這個字體顏色為紅色</p>
<p>該字體顏色不為紅色</p>
只有類為important的文本字體將會改變
?
- 多類選擇器
<!--css-->
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
<!--html-->
<p class="important warning">
該字體顯示為加粗、斜體以及背景色為銀色的效果
</p>
樣式顯示為所有類的樣式效果
?
四、屬性選擇器
為擁有指定屬性的 HTML 元素設置樣式，而不僅限于 class 和 id 屬性
<!--css-->
[title]
{
color:red;
}
<!--html-->
<h2 title="Hello world">Hello world</h2>
字體顏色改變
更多
- 根據具體屬性值選擇
<!--css-->
p[class="important warning"] {color:red}
<!--html-->
<p class="important warning">字體顏色為紅色</p>
屬性與屬性值必須完全匹配
?
- 根據部分屬性值選擇
<!--css-->
p[class="important"] {color:red}
<!--html-->
<p class="important warning">字體顏色為紅色</p>
?
五、派生選擇器
-
后代選擇器
通過依據元素在其位置的上下文關系來定義樣式
?
示例：
<!--css樣式-->
li strong {
font-style: italic;
font-weight: normal;
}
<!--html代碼-->
水果種類
<ul>
<li><strong>蘋果</strong></li>
<li>香蕉</li>
<li>李子</li>
</ul>
可解釋為strong為li的后代
只有strong標簽內的字體為斜體
?
-
子元素選擇器
只能選擇作為某元素子元素的元素。
?
示例：
<!--css-->
h1 > strong {color:red;}
<!--html-->
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
只有h內子標簽為strong的元素內容樣式發生改變
選擇作為 h1 元素子元素的所有 strong 元素
子結合符兩邊可以有空白符
?
-
相鄰兄弟選擇器
可選擇緊接在另一元素后的元素，且二者有相同父元素
?
示例：
<!--css-->
h1 + p {margin-top:50px;}
<!--html-->
<h1>This is a heading.</h1>
<p>和h1有距離</p>
<p>This is paragraph.</p>
選擇緊接在 h1 元素后出現的段落，h1 和 p 元素擁有共同的父元素”。
?
五、選擇器關系
選擇器之間可以相互結合
-
id選擇器和派生選擇器
id選擇器常用于建立于派生選擇器
<!--css樣式-->
#top li {
font-style: italic;
font-weight: normal;
}
<!--html代碼-->
食品
<ul id="food">
<li>鍋巴</li>
<li>方便面</li>
</ul>
水果種類
<ul>
<li>蘋果</li>
<li>香蕉</li>
<li>李子</li>
</ul>
只有id為food中的li標簽內的字體為斜體
-
id選擇器和類選擇器
- 區別 1：id選擇器在文檔中使用一次
?與類不同，在一個 HTML 文檔中，ID 選擇器會使用一次，而且僅一次。
- 區別 2：不能使用 ID 詞列表
?不同于類選擇器，ID 選擇器不能結合使用，因為 ID 屬性不允許有以空格分隔的詞列表。 - 區別 3：ID 能包含更多含義
?類似于類，可以獨立于元素來選擇 ID。
