子選擇符、相鄰選擇符、兄弟選擇符、僞類選擇符

時間 2019-11-20

標籤選擇相鄰兄弟简体版

原文原文鏈接

子選擇符：

E>Fhtml

選擇全部做爲E元素的子元素F測試

<style>
div>p{ color: red; }
</style>

<div>
<h3>我是標題1</h3>
<p>我第1個是p標籤</p>
<p>我第2個是p標籤</p>
<p>我第3個是p標籤</p>
<small>我是小標題</small>
</div>

顯示效果：字體

相鄰選擇符：

E+Fspa

選擇緊貼在E元素以後F元素。3d

<style>
div+p{background: red;}
</style>

<div>
<h3>我是標題1</h3>
</div>

<div>
<small>我是小標題</small>
<p>我第1個是p標籤</p>
</div>

<p>我就是緊貼在div元素後面的p元素</p>
<p>我第3個是p標籤</p>
</div>

顯示效果：code

兄弟選擇符：

E~Form

選擇E元素全部兄弟元素F。htm

<style> 
    div~p{ background: yellow; }
</style>

<div>
<p>我第1個是p標籤，我在div裏</p>
<p>我第2個是p標籤，我在div裏</p>
</div>

<p>我第3個是p標籤，我不在div裏</p>
<p>我第3個是p標籤，我不在div裏</p>

顯示效果：blog

僞類選擇符：

選擇符　　　　　　　描述事件

一、E:link　　　　　　設置超連接a在未被訪問前的樣式。

<style>
a:link{
background-color:yellow;
color:blue;
}     
</style>

<a href="http://www.daidu.com">百度</a>
<a href="http://www.daidu.com">百度</a>
<a href="http://www.daidu.com">百度</a>

顯示效果：未被訪問前是黃色的背景色和字體是藍色

二、E:visited　　　　　　設置超連接a在其連接地址已被訪問過期的樣式。

三、E:hover　　　　　　設置元素在其鼠標懸停時的樣式。

四、E:active　　　　　　設置元素在被用戶激活

<style>
a:visited {color:green;}
a:hover   {color:red;}
a:active  {color:yellow;}
</style>


<p>將鼠標移上並點擊此連接: <a href="#">訪問後是綠色的，鼠標懸停時時紅色的，點擊那刻是黃色的</a></p>

五、E:focus 　　　　　設置元素在成爲輸入焦點 (該元素的onfocus事件發生)時的樣式。

<style>
input:focus{background-color:yellow;}
</style>


用戶名：<input type="text" name="user" />

效果：點擊文本輸入框表單能夠看到黃色背景

六、E:lang(fr)　　　　　匹配使用特殊語言的E元素。不多用

<style>
p:lang(abc) {
    color: #f00;
}
p:lang(d) {
    color: #ccc;
}
</style>


<p lang="abc">（效果爲紅色的字體）</p>
<p lang="d">（效果爲灰色的字體）</p>

七、E:not(s) 　　　　　匹配不含有s選擇符的元素E。

<style>
p:not(.abc) { color: #f00;}
</style>

<p class="abc">否認僞類選擇符 E:not(s)</p>
<p id="abc">否認僞類選擇符 E:not(s)</p>
<p class="abcd">否認僞類選擇符 E:not(s)</p>
<p>否認僞類選擇符 E:not(s)</p>

顯示效果：

八、E:root 　　　　　　匹配E元素在文檔的根元素。常指html元素

父類型中的子元素：

九、E:first-child　　匹配父元素的第一個子元素E。

十、E:last-child　　　　匹配父元素的最後一個子元素E。

十一、E:only-child 　　　　匹配父元素僅有的一個子元素E。

十二、E:nth-child(n) 　　匹配父元素的第n個子元素E。

1三、E:nth-last-child(n) 匹配父元素的倒數第n個子元素E。

父類型中的子元素拿以上幾個例子來測試以下：

<style> 
div p:first-of-type {color: red;}/* 父類元素的第一個子元素 */
div p:last-of-type {color: yellow;}/* 父類元素的最後一個子元素 */
div p:nth-of-type(4) {color: blue;}/* 父類元素的第四個子元素 */
</style>



<div>
<p>我是第一個p標籤，是紅色</p>
<p>11111111</p>
<p>11111111</p>
<p>我是第四個p標籤，是藍色</p>
<p>11111111</p>
<p>我是最後一個p標籤，是黃色</p>
</div>

效果顯示：

同類型中的同級兄弟元素：

1四、E:first-of-type 　　匹配同類型中的第一個同級兄弟元素E。

1五、E:last-of-type　　匹配同類型中的最後一個同級兄弟元素E。

1六、E:only-of-type　　匹配同類型中的惟一的一個同級兄弟元素E。

1七、E:nth-of-type(n)　匹配同類型中的第n個同級兄弟元素E。

1八、E:nth-last-of-type(n)匹配同類型中的倒數第n個同級兄弟元素E。

拿以上同類型中的同級兄弟元素的幾個例子測試以下：

<style> 
p:first-of-type {color: red;}/* 同類型中的第一個同級兄弟元素 */
p:last-of-type {color: yellow;}/* 同類型中的最後一個 */
p:nth-of-type(4) {color: blue;}/* 同類型中的第四個 */
</style>



<p>我是第一個p標籤，是紅色</p>
<p>11111111</p>
<p>11111111</p>
<p>我是第四個p標籤，是藍色</p>
<p>11111111</p>
<p>我是最後一個p標籤，是黃色</p>

效果：

1九、E:empty　　　　　　匹配沒有任何子元素（包括text節點）的元素E。

<style>
p:empty {
    height: 25px;
    border: 1px solid #ddd;
    background: #eee;
}
</style>
<div>
    <p>結構性僞類選擇符 E:empty</p>
    <p><!--我是沒文字的空標籤--></p>
    <p>結構性僞類選擇符 E:empty</p>
</div>

效果圖：

20、E:checked　　　　　匹配用戶界面上處於選中狀態的元素E。(用於input type爲radio與checkbox時)

<style> 
    input:checked{ width: 25px; height: 25px; }
</style>


<input type="radio"/>女
<input type="radio"/>男

效果是被選中時寬高都變25px：

2一、E:enabled　　　　匹配用戶界面上處於可用狀態的元素E。

2二、E:disabled　　　　匹配用戶界面上處於禁用狀態的元素E。

E:enabled、E:disabled測試以下：

<style> 
input[type="text"]:enabled
{
    background:#ffff00;
}
input[type="button"]:disabled
{
    background: ccc;
}
</style>



<form action="">
用戶名: <input type="text" value="可用" /><br>
用戶名: <input type="text" value="可用" /><br>
注　冊: <input type="button" disabled="disabled" value="禁用了" /><br>
</form>

效果：

2三、E:target　　　　　　匹配相關URL指向的E元素。

<style> 
.box ul{list-style: none;}    
.box ul li{ float: left; margin-left: 20px;}
a:target{ color: red; }
</style>



<div class="box">
    <ul>
        <li><a href="#nav1" id="nav1">導航一</a></li>
        <li><a href="#nav2" id="nav2">導航二</a></li>
        <li><a href="#nav3" id="nav3">導航三</a></li>
    </ul>
</div>