css3学习 之 css选择器(结构性伪类选择器)
同上篇：先說明下本機瀏覽器吧：opera 10 firefox 4.0 chrome 由于是公司機器xp的。。所以ie版本為 ie8 ?另外有一個ietest?
所謂偽元素選擇器，是指并不是針對真正的元素使用的選擇器，而是針對css中已經定義好的偽元素使用的選擇器，它的使用方法如下所示。
選擇器:偽元素{屬性:值}
偽元素選擇器也可以與類配合使用，使用方法如下所示。?
選擇器 類名:偽元素{屬性:值}?
?
1：在css中，主要有如下四個偽元素選擇器
first-line 、 first-letter 、before 、after
說明:?first-letter:用于為某個元素中的文字的首字母(歐美文字)或第一個字(中文或者日文等漢字)使用樣式(其實就是第一個字符)
其他的我就不說明了。。大家看字面意思就明白了。
?
2：選擇器root、not、empty、target
root:?
root選擇器將樣式綁定到頁面的根元素中。所謂根元素是指位于文檔樹中最頂層結構的元素，在html頁面中就是指包含著整個頁面的<html>部分。
?example:
<head>
<meta?content="text/html;?charset=UTF-8"?http-equiv="Content-Type">
<style>
:root{
????background-color:yellow;
}
body{
????background-color:limegreen;
}
</style>
</head>
<body>
<h1>選擇器概述</h1>
<p>在css3中，提倡使用選擇器來將樣式與元素直接綁定起來，這樣的話，在樣式表中什么樣式與元素相匹配變得一目了然，修改起來也很方便。不僅如此，通過選擇器，我們還可以實現各種復雜的指定，同時也能大量減少樣式表的代碼書寫量，最終書寫出來的樣式也會變得簡潔明</p>
</body>
</html>
?
運行效果:opera 和firefox起作用。ie與chrome不起作用
?
ps:這里有個好玩的現象：當root 與body同時出現的時候?body樣式有效范圍為頁面body范圍內。。但是當僅僅使用body樣式的時候整個頁面為body的有效范圍
?
?not:
?如果相對某個結構元素使用樣式，但是想排除這個結構元素下面的子結構元素，讓它不使用這個樣式時，可以使用not選擇器。
?
example:
<html>??<head>
<meta?content="text/html;?charset=UTF-8"?http-equiv="Content-Type">
<style>
body *:not(h1){
????background-color:limegreen;
}
</style>
</head>
<body>
<h1>選擇器概述</h1>
<p>在css3中，提倡使用選擇器來將樣式與元素直接綁定起來，這樣的話，在樣式表中什么樣式與元素相匹配變得一目了然，修改起來也很方便。不僅如此，通過選擇器，我們還可以實現各種復雜的指定，同時也能大量減少樣式表的代碼書寫量，最終書寫出來的樣式也會變得簡潔明</p>
</body>
</html>??
運行效果：除了ie其他均能正常顯示。。?
?
?
empty：
?使用empty選擇器來指定當元素內容為空白時使用的樣式
?example:
<html>??<head>
<meta?content="text/html;?charset=UTF-8"?http-equiv="Content-Type">
<style>
:empty{
????background-color:limegreen;
}
</style>
</head>
<body>
<h1>選擇器概述</h1>
<table?border="1">
?<tr><td>A</td><td>B</td><td>C</td></tr>
?<tr><td>D</td><td>E</td><td></td></tr>
</table>
</body>
</html>?
?運行效果：同樣除了IE其他都可以顯示(PS:目前我沒有在ie9中運行。所以沒有資格在這里說明)
?這里我有一個疑問：
?? ?:empty{
?? ?background-color:limegreen;content:"no";?
?}
也就是說當為空的時候顯示“no” 。。但是我發現content無法顯示.這是為啥呢？
?
?target
使用target選擇器來對頁面某個target元素(該元素的id被當做頁面中的超鏈接來使用)指定樣式，該樣式只在用戶點擊了頁面中的超鏈接，并且跳轉到target元素后起作用
example:
<html>?<head>
<meta?content="text/html;?charset=UTF-8"?http-equiv="Content-Type">
<style>
:target{
????background-color:yellow;
}
</style>
</head>
<body>
<p?id="menu">
<a?href="#text1">示例文字1</a>?|
<a?href="#text2">示例文字2</a>?|
<a?href="#text3">示例文字3</a>?|
<a?href="#text4">示例文字4</a>?
</p>
<div?id="text1">
?<h2>示例文字1</h2>
?<p>...此處略去...</p>
</div>
<div?id="text2">
?<h2>示例文字2</h2>
?<p>...此處略去...</p>
</div>
<div?id="text3">
?<h2>示例文字3</h2>
?<p>...此處略去...</p>
</div>
<div?id="text4">
?<h2>示例文字4</h2>
?<p>...此處略去...</p>
</div>
</body>
</html>
運行效果：除了ie其他均能夠正常顯示
其中說明: ?href="#text1"??是進行描點定位一旦去掉這個就不能滿足“并且跳轉到target元素后起作用” 故其樣式也將不起作用
?
3：選擇器first-child、last-child、nth-child、nth-last-child、nth-of-type、nth-last-of-type
?
?first-child、last-child 這里我就不詳細描述了。
?
nth-child、nth-last-child
針對一個父元素的第一個子元素開始起第多少個元素和最后一個子元素起第多少個元素起作用。
example:
<head>
<meta?content="text/html;?charset=UTF-8"?http-equiv="Content-Type">
<style>
li:nth-child(2){
?background-color:yellow;
}
li:nth-last-child(2){
?background-color:skyblue;
}
</style>
</head>
<body>
<h2>列表A</h2>
<ul>
??<li>列表項目1</li>
??<li>列表項目2</li>
??<li>列表項目3</li>
??<li>列表項目4</li>
</ul>
</body>
</html>
?
同樣ie不爭氣。。。
但是我想說明的是某些情況下會有問題：
比如某個div中有以下元素<h2>標題1</h2><p>正文1</p>?<h2>標題2</h2><p>正文2</p>?<h2>標題3</h2><p>正文3</p> ?當我們設置h2:nth-child(odd){background-color:yellow;}
本來我們是希望所有奇數標題(h2)顯示黃色。但是我們發現所有標題(h2)均顯示黃色。這時為啥呢？
因為nth-child選擇器在計算子元素是第奇數個元素，是連同所有父元素中所有子元素一起計算的這樣<h2>永遠都是奇數元素了。
nth-of-type能夠有效的解決這個問題。?
?
最后再舉一個循環使用的例子:
??
<html>?<head>
<meta?content="text/html;?charset=UTF-8"?http-equiv="Content-Type">
<style>
li:nth-child(2n+1){
?background-color:yellow;
}
li:nth-child(2n+2){
?background-color:skyblue;
}
</style>
</head>
<body>
<h2>列表A</h2>
<ul>
??<li>列表項目1</li>
??<li>列表項目2</li>
??<li>列表項目3</li>
??<li>列表項目4</li>
</ul>
</body>
</html>
?
原來可以這樣的。。。css選擇器真的很神奇?
總結
以上是生活随笔為你收集整理的css3学习 之 css选择器(结构性伪类选择器)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSS3之伪元素选择器和伪类选择器
- 下一篇： CSS3学习笔记1：结构性伪类选择器