除了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>

来源:https://blog.51cto.com/14648170/2501088


码神部落- 版权声明 1、本主题所有言论和图片纯属会员个人意见,与码神部落立场无关。
2、本站所有主题由该帖子作者发表,该帖子作者爷依然萧洒码神部落享有帖子相关版权。
3、码神部落管理员和版主有权不事先通知发贴者而删除本文。
4、其他单位或个人使用、转载或引用本文时必须同时征得该帖子作者爷依然萧洒码神部落的同意。
5、帖子作者须承担一切因本文发表而直接或间接导致的民事或刑事法律责任。
6、本帖部分内容转载自其它媒体,但并不代表本站赞同其观点和对其真实性负责。
7、如本帖侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意。

最新回复 (0)
    • 码神部落
      2
        立即登录 立即注册 GitHub登录
返回
发新帖
作者最近主题: