除了4種鼠標狀態僞類選擇器,除了target,jQuery都支持,在jQuery中也叫過濾選擇器
1.first-child
E:first-child 第一個E元素(這個E元素必須是父元素的第一個子元素)
2.first-of-type
E:first-of-type
第一個E類型的元素(這個E元素不一定是父元素的第一個子元素)
3.last-child
E:last-child 最後一個E元素(這個E元素必須是父元素的最後一個子元素)
4.last-of-type
E:last-of-type 最後一個E類型的元素(這個E元素不一定是父元素的最後一個子元素)
5.nth-child(n)
選擇第n個子元素(從前往後數)
n是從1開始
E:nth-child(n) 選擇第n個E元素。
li:nth-child(2n) {color:red}
li:nth-child(2n+1) {color:red}
li:nth-child(even){color:#f00;} / 偶數 /
li:nth-child(odd){color:purple;} / 奇數 /
6.nth-of-type(n)
E:nth-of-type(n) 選擇第n個E類型的元素
7.nth-last-child(n)
E:nth-last-child(n)
選擇第n個子元素(從後往前數)
8.nth-last-of-type(n)
E:nth-last-of-type(n)
9.only-child
就是父盒子裏面只有它一個子元素
<style>
ul li:only-child {
color: red;
}
</style>
<ul>
<li>1111111111</li>
</ul>
<ul>
<li>2222222</li>
<li>33333333</li>
<li>4444</li>
</ul>
10.only-of-type
就是父盒子裏面只有它一個E類型的子元素,父盒子裏面可以有多個子元素
<style>
ul li:only-of-type {
color: red;
}
</style>
<ul>
<p>pppp</p>
<p>ppppp</p>
<li>1111111111</li>
</ul>
11.empty
選擇沒有任何子元素(包括text節點)的元素E
<style>
div p:empty {
height: 25px;
border: 1px solid #ccc;
background: red;
}
</style>
<div>
<p>11111</p>
<p></p>
<p>33333</p>
</div>
12.:enabled
選擇表單中處於可用狀態的元素
input:enabled{color:red}
13.:disabled
選擇表單中處於禁用狀態的元素
input:disabled{color:red}
<style>
input[type="text"]:enabled {
border: 2px solid blue;
background: greenyellow;
color: #000;
}
input[type="text"]:disabled {
border: 2px solid black;
background: orangered;
color: #fff;
}
</style>
<input type="text" value="可用狀態" />
<input type="text" value="禁用狀態" disabled="disabled" />
14.:checked
選擇表單中被選中的radio或checkbox元素
input:checked{color:red}
<style>
input:checked+span {
background: #f00;
}
input:checked+span:after {
content: " 我被選中了";
}
</style>
<label><input type="radio" name="colour-group" value="0" /><span>藍色</span></label>
<label><input type="radio" name="colour-group" value="1" /><span>紅色</span></label>
15.:focus
選擇獲得焦點的 input 元素
<style>
input:focus {
background: #f6f6f6;
color: #f60;
border: 1px solid #f60;
outline: none;
}
</style>
<input value="姓名" />
<input value="單位" />
16.E:not(selector)
匹配不含有selector選擇符的元素E
<style>
.test :not(p) {
color: red;
}
</style>
<div class="test">
<p>11111</p>
<p>22222</p>
<span>愛學吧</span>
</div>
<style>
ul li:not(:last-child) {
border-bottom: 1px solid red;
}
</style>
<ul>
<li>11111</li>
<li>2222</li>
<li>333333</li>
</ul>
<style>
div p:not(.abc) {
color: red;
}
</style>
<div>
<p>1111</p>
<p class="abc">222</p>
<p>33333</p>
</div>