CSS?組合選擇符
CSS組合選擇符包括各種簡(jiǎn)單選擇符的組合方式。
在 CSS3 中包含了四種組合方式:
后代選擇器(以空格分隔)
子元素選擇器(以大于號(hào)分隔）
相鄰兄弟選擇器（以加號(hào)分隔）
普通兄弟選擇器（以破折號(hào)分隔）
后代選擇器
后代選擇器用于選取某元素的后代元素朽寞。
以下實(shí)例選取所有 <p> 元素插入到 <div> 元素中:?
div p
{ background-color:yellow;
}
子元素選擇器
與后代選擇器相比眼五，子元素選擇器（Child selectors）只能選擇作為某元素子元素的元素峰尝。
以下實(shí)例選擇了<div>元素中所有直接子元素 <p> ：
div>p
{ background-color:yellow;
}
相鄰兄弟選擇器
相鄰兄弟選擇器（Adjacent sibling selector）可選擇緊接在另一元素后的元素狐援，且二者有相同父元素贡必。
如果需要選擇緊接在另一個(gè)元素后的元素俱恶，而且二者有相同的父元素雹嗦，可以使用相鄰兄弟選擇器（Adjacent sibling selector）。
以下實(shí)例選取了所有位于 <div> 元素后的第一個(gè) <p> 元素:
div+p
{ background-color:yellow;
}
后續(xù)兄弟選擇器
后續(xù)兄弟選擇器選取所有指定元素之后的相鄰兄弟元素速那。
以下實(shí)例選取了所有 <div> 元素之后的所有相鄰兄弟元素 <p> :?
div~p
{ background-color:yellow;
}
CSS?偽類(Pseudo-classes)
偽類的語法：
selector:pseudo-class {property:value;}
CSS類也可以使用偽類：
selector.class:pseudo-class {property:value;}
anchor偽類
在支持 CSS 的瀏覽器中俐银，鏈接的不同狀態(tài)都可以以不同的方式顯示
a:link {color:#FF0000;} /* 未訪問的鏈接 */
a:visited {color:#00FF00;} /* 已訪問的鏈接 */
a:hover {color:#FF00FF;} /* 鼠標(biāo)劃過鏈接 */
a:active {color:#0000FF;} /* 已選中的鏈接 */
注意：?在CSS定義中，a:hover 必須被置于 a:link 和 a:visited 之后端仰，才是有效的捶惜。
注意：?在 CSS 定義中，a:active 必須被置于 a:hover 之后荔烧，才是有效的吱七。
注意：偽類的名稱不區(qū)分大小寫。
偽類和CSS類
偽類可以與 CSS 類配合使用：
a.red:visited {color:#FF0000;}
<a class="red" href="css-syntax.html">CSS 語法</a>
CSS :first-child 偽類
您可以使用 :first-child 偽類來選擇父元素的第一個(gè)子元素鹤竭。
注意：在IE8的之前版本必須聲明<!DOCTYPE>?踊餐，這樣 :first-child 才能生效。
匹配第一個(gè) <p> 元素
在下面的例子中臀稚，選擇器匹配作為任何元素的第一個(gè)子元素的 <p> 元素：
p:first-child
{ color:blue;
}
匹配所有<p> 元素中的第一個(gè) <i> 元素
在下面的例子中吝岭，選擇相匹配的所有<p>元素的第一個(gè) <i> 元素：
p > i:first-child
{ color:blue;
}
CSS - :lang 偽類
:lang 偽類使你有能力為不同的語言定義特殊的規(guī)則
注意：IE8必須聲明<!DOCTYPE>才能支持;lang偽類。
在下面的例子中吧寺，:lang 類為屬性值為 no 的q元素定義引號(hào)的類型：
q:lang(no) {quotes: "~" "~";}
CSS?偽元素
偽元素的語法：
selector:pseudo-element {property:value;}
CSS類也可以使用偽元素：
selector.class:pseudo-element {property:value;}
:first-line 偽元素
"first-line" 偽元素用于向文本的首行設(shè)置特殊樣式窜管。
在下面的例子中，瀏覽器會(huì)根據(jù) "first-line" 偽元素中的樣式對(duì) p 元素的第一行文本進(jìn)行格式化：
p:first-line { color:#ff0000;
? ? font-variant:small-caps;}
注意："first-line" 偽元素只能用于塊級(jí)元素稚机。
注意：?下面的屬性可應(yīng)用于 "first-line" 偽元素：
font properties
color properties?
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
:first-letter 偽元素
"first-letter" 偽元素用于向文本的首字母設(shè)置特殊樣式：
p:first-letter { color:#ff0000;
? ? font-size:xx-large;}
注意：?"first-letter" 偽元素只能用于塊級(jí)元素幕帆。
注意：?下面的屬性可應(yīng)用于 "first-letter" 偽元素：
font properties
color properties?
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if "float" is "none")
text-transform
line-height
float
clear
偽元素和CSS類
偽元素可以結(jié)合CSS類：?
p.article:first-letter?
{color:#ff0000;}<p class="article">文章段落</p>
多個(gè)偽元素
可以結(jié)合多個(gè)偽元素來使用。
在下面的例子中赖条，段落的第一個(gè)字母將顯示為紅色失乾，其字體大小為 xx-large。第一行中的其余文本將為藍(lán)色纬乍，并以小型大寫字母顯示碱茁。
段落中的其余文本將以默認(rèn)字體大小和顏色來顯示：
p:first-letter{ color:#ff0000;
? ? font-size:xx-large;}
p:first-line {? ? color:#0000ff;
? ? font-variant:small-caps;}
CSS - :before 偽元素
":before" 偽元素可以在元素的內(nèi)容前面插入新內(nèi)容。
下面的例子在每個(gè) <h1>元素前面插入一幅圖片：
h1:before?
{ content:url(smiley.gif);
}
CSS - :after 偽元素
":after" 偽元素可以在元素的內(nèi)容之后插入新內(nèi)容仿贬。
下面的例子在每個(gè) <h1> 元素后面插入一幅圖片：
h1:after
{ content:url(smiley.gif);
}
CSS 導(dǎo)航欄
ul { list-style-type: none;
? ? margin: 0;
? ? padding: 0;}
list-style-type:none - 移除列表前小標(biāo)志早芭。一個(gè)導(dǎo)航欄并不需要列表標(biāo)記
移除瀏覽器的默認(rèn)設(shè)置將邊距和填充設(shè)置為0
垂直導(dǎo)航欄
<ul>?
?<li><a href="#home">主頁</a></li>?
?<li><a href="#news">新聞</a></li>?
?<li><a href="#contact">聯(lián)系</a></li>?
?<li><a href="#about">關(guān)于</a></li>
</ul>
上面的代碼，我們只需要 <a>元素的樣式诅蝶，建立一個(gè)垂直的導(dǎo)航欄：
a{ display:block;
? ? width:60px;}
display:block - 顯示塊元素的鏈接退个，讓整體變?yōu)榭牲c(diǎn)擊鏈接區(qū)域（不只是文本），它允許我們指定寬度
width:60px - 塊元素默認(rèn)情況下是最大寬度调炬。我們要指定一個(gè)60像素的寬度
水平導(dǎo)航欄
有兩種方法創(chuàng)建橫向?qū)Ш綑谟镉Ｊ褂?b>內(nèi)聯(lián)(inline)或浮動(dòng)(float)的列表項(xiàng)。
這兩種方法都很好缰泡，但如果你想鏈接到具有相同的大小刀荒，你必須使用浮動(dòng)的方法。
內(nèi)聯(lián)列表項(xiàng)
建立一個(gè)橫向?qū)Ш綑诘姆椒ㄖ皇侵付ㄔ兀?上述代碼是標(biāo)準(zhǔn)的內(nèi)聯(lián):
li{?
?display:inline;
}
display:inline; -默認(rèn)情況下棘钞，<li>元素是塊元素缠借。在這里，我們刪除換行符之前和之后每個(gè)列表項(xiàng)宜猜，以顯示一行泼返。
浮動(dòng)列表項(xiàng)
在上面的例子中鏈接有不同的寬度。
對(duì)于所有的鏈接寬度相等姨拥，浮動(dòng) <li>元素绅喉，并指定為 <a>元素的寬度：
li{ float:left;}
a{ display:block;
? ? width:60px;}
float:left - 使用浮動(dòng)塊元素的幻燈片彼此相鄰
display:block - 顯示塊元素的鏈接，讓整體變?yōu)榭牲c(diǎn)擊鏈接區(qū)域（不只是文本）叫乌，它允許我們指定寬度
width:60px - 塊元素默認(rèn)情況下是最大寬度柴罐。我們要指定一個(gè)60像素的寬度
