一若专、元素選擇器
文檔元素為最基本的選擇器
示例：
<!--css-->
p{
color: #00CCFF;
}
<!--html-->
<p>css選擇器示例</p>
p標(biāo)簽內(nèi)的字體顏色改變了
二俊卤、id選擇器
id 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式;id 選擇器以 "#" 來定義。
示例：
<!--css樣式-->
#red {
color:red;
}
<!--html代碼-->
水果種類
<ul>
<il><strong>蘋果</strong></li>
<li id="red">香蕉</li>
<li>李子</li>
</ul>
只有“香蕉”字體顏色為紅色
id 屬性只能在每個 HTML 文檔中出現(xiàn)一次爽蝴，并且區(qū)分大小寫
三迅皇、類選擇器
類選擇器以一個點號顯示春宣，使用class設(shè)置類名
示例：
<!--css-->
.fo{
color: #00AA88;
}
<!--html-->
食品
<ul class="fo">
<li>鍋巴</li>
<li>方便面</li>
</ul>
類為fo的列表文字顏色改變
?
更多：
- 結(jié)合元素選擇器
<!--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 元素設(shè)置樣式，而不僅限于 class 和 id 屬性
<!--css-->
[title]
{
color:red;
}
<!--html-->
<h2 title="Hello world">Hello world</h2>
字體顏色改變
更多
- 根據(jù)具體屬性值選擇
<!--css-->
p[class="important warning"] {color:red}
<!--html-->
<p class="important warning">字體顏色為紅色</p>
屬性與屬性值必須完全匹配
?
- 根據(jù)部分屬性值選擇
<!--css-->
p[class="important"] {color:red}
<!--html-->
<p class="important warning">字體顏色為紅色</p>
?
五躏惋、派生選擇器
-
后代選擇器
通過依據(jù)元素在其位置的上下文關(guān)系來定義樣式
?
示例：
<!--css樣式-->
li strong {
font-style: italic;
font-weight: normal;
}
<!--html代碼-->
水果種類
<ul>
<li><strong>蘋果</strong></li>
<li>香蕉</li>
<li>李子</li>
</ul>
可解釋為strong為li的后代
只有strong標(biāo)簽內(nèi)的字體為斜體
?
-
子元素選擇器
只能選擇作為某元素子元素的元素幽污。
?
示例：
<!--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內(nèi)子標(biāo)簽為strong的元素內(nèi)容樣式發(fā)生改變
選擇作為 h1 元素子元素的所有 strong 元素
子結(jié)合符兩邊可以有空白符
?
-
相鄰兄弟選擇器
可選擇緊接在另一元素后的元素，且二者有相同父元素
?
示例：
<!--css-->
h1 + p {margin-top:50px;}
<!--html-->
<h1>This is a heading.</h1>
<p>和h1有距離</p>
<p>This is paragraph.</p>
選擇緊接在 h1 元素后出現(xiàn)的段落簿姨，h1 和 p 元素?fù)碛泄餐母冈亍薄?/em>
?
五距误、選擇器關(guān)系
選擇器之間可以相互結(jié)合
-
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標(biāo)簽內(nèi)的字體為斜體
-
id選擇器和類選擇器
- 區(qū)別 1：id選擇器在文檔中使用一次
?與類不同，在一個 HTML 文檔中扁位，ID 選擇器會使用一次深寥，而且僅一次。
- 區(qū)別 2：不能使用 ID 詞列表
?不同于類選擇器贤牛，ID 選擇器不能結(jié)合使用，因為 ID 屬性不允許有以空格分隔的詞列表则酝。 - 區(qū)別 3：ID 能包含更多含義
?類似于類殉簸，可以獨立于元素來選擇 ID。
