2021-07-15 其他伪类选择器及伪元素选择器

最新推荐文章于 2022-10-02 11:33:37 发布

前端畑鹿惊

最新推荐文章于 2022-10-02 11:33:37 发布

阅读量98

点赞数 1

分类专栏：笔记文章标签： html css

本文链接：https://blog.csdn.net/m0_46522502/article/details/118770028

版权

笔记专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1.其他伪类选择器也有很多

例如：

:first-of-type 选中第一个指定元素
:last-of-type 选中最后一个指定的元素
:nth-child(n) 选中第n个元素
:nth-of-type(n) 选中第n个指定的元素
:only-child 选中唯一一个的子元素
:only-of-type 选中唯一的指定元素
:empty 选中没有任何子元素(元素里面不能有任何的内容)的空元素
:checked 选中页面中被选中的单选框或复选框
:enabled 选中页面中, 处于可用(没有被禁用)的元素
:disabled 选中页面中处于禁用状态的元素
:target 选中被激活的锚点
:focus 元素获取焦点时的样式
:not(css选择器) 选择不含有某个选择器的元素

看代码👇👇👇

<body>
    <a href="#mb1">锚点1</a>
    <a href="#mb2">锚点2</a>

    <input type="text">
    <input type="text" disabled>

    <ul>
        <span>啊这。。</span>
        <li class="item">第1个</li>
        <span>啊这。。</span>
        <li class="item">第2个</li>
        <li class="">第3个</li>
        <li class="item">第4个</li>
        <li class="item">第5个</li>
        <li class="item">第6个</li>
        <li class="item">第7个</li>
        <li class="item">第8个</li>
        <a href="">aaaa</a>
        <!-- <span>啊这。。。。</span> -->
    </ul>
    <hr>

    <ol>
        <span>aaa</span>
        <li>这是第1个li</li>
        <span>aaa</span>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <span>aaa</span>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <a href="">这是唯一的a标签</a>
        <li id="mb1">这是第7个li</li>
        <li id="mb2">这是第8个li</li>
    </ol>

    <ul></ul>
    <ol></ol>

    <input type="radio" name="sex"> 男
    <input type="radio" name="sex"> 女
    <input type="checkbox" name="" id="" disabled> 1
    <input type="checkbox" name="" id=""> 2
</body>

CSS样式👇👇👇

/* :root 只选中HTML元素 */
:root, body{
    width: 100%;
    height: 100%;
    margin-bottom: 1000px;
}

/* input{
    width: 210px;
    transition: all 0.5s linear 0s;
} */

/* :focus 元素获取焦点时的样式 */
/* input:focus{
    width: 500px;
} */

/* :not(css选择器) 选择不含有某个选择器的元素*/
ul li:not(.item){
    background-color: orange;
}

/* :first-child 选中第一个子元素 */
    ul>li:first-child{
        margin-left: 120px;
    }

/* :first-of-type 选中第一个指定元素 */
    /* 选中第一个指定的li元素 */
    ul>li:first-of-type{
        font-weight: bolder;
    }

/* :last-child 选中最后一个子元素 */
    ul>li:last-child{
        color: red;
    }

/* :last-of-type 选中最后一个指定的元素 */
    /* 选中最后一个指定的li元素 */
    ul>li:last-of-type{
        /* color: red; */
    }

/* :nth-child(n) 选中第n个元素 */
ul>li:nth-last-child(4){
    letter-spacing: 20px;
}

/* :nth-of-type(n) 选中第n个指定的元素 */
ul>li:nth-of-type(3){
    text-decoration: underline;
}

/* nth-child() 和 :nth-of-type()  可以选择奇数和偶数 */
    /* odd 选中奇数个元素 */
    /* ol>li:nth-child(odd){
        color: brown;
    } */

    /* even 选中偶数个元素 */
    /* ol>li:nth-child(even){
        letter-spacing: 10px;
    } */

    /* 2n 选中偶数个元素 */
    /* ol>li:nth-of-type(even){ */
    ol>li:nth-of-type(2n){
        border-left: 10px solid #000;
    }

    /*  2n-1 选中奇数个元素 */
    ol>li:nth-of-type(2n-1){
      color: chartreuse;
    }


    /* :only-child 选中唯一一个的子元素 */
    ol a:only-child{
        font-size: 40px;
    }

    /* :only-of-type 选中唯一的指定元素 */
    ol a:only-of-type{
        font-size: 40px;
    }

    /* :empty 选中没有任何子元素(元素里面不能有任何的内容)的空元素 */
    ul:empty, ol:empty{ 
        width: 400px;
        height: 400px;
        background-color: darkcyan;
    }

    /* :checked 选中页面中被选中的单选框或复选框 */
    input:checked{
        width: 40px;
        height: 40px;
    }

    /* :enabled 选中页面中, 处于可用(没有被禁用)的元素 */
    input:enabled{
       margin-left: 50px;
    }

    /* :disabled 选中页面中 处于禁用状态的元素 */
    input:disabled{
        border: 2px solid #f00;
    }
    
    /* :target 选中被激活的锚点 */
    li:target{
        color: red!important;
    }

来看下效果图，代码是上课时老师演示的。
在这里插入图片描述

2.伪元素选择器

①概念：在 CSS 中允许使用伪元素来添加一些选择器的特殊效果。
②语法：selector:伪元素 {属性: 属性值;}

<body>
    <div>
        伪元素选择器
    </div>
    <p>伪元素选择器</p>
    <ul>
        <li>123456</li>
        <li>123456</li>
        <li>123456</li>
        <li>123456</li>
        <li>123456</li>
        <li>123456</li>
    </ul>
</body>

CSS样式👇👇👇

::selection {           （按住鼠标选中不松，字体变黄，背景变黑）
    background: black;
    color: yellow;
}

div{
    width: 200px;
}

/* :first-letter 给第一个字符添加特殊样式 */
div:first-letter{
    color: red;
}

/* :first-line 给第一行添加样式 */
div:first-line{
    color: green;
}

/* :before 在内容的前面 插入伪元素(理解成span元素) */
    div:before{
        /* content 内容, content 可以未空, 但必须要有 */
        content: "在之前插入的内容";
        color: red;
        margin-left: 20px;
    }
/* :after 在内容之后, 插入伪元素(理解成span元素) */
    div:after{
        /* content 内容, content 可以未空, 但必须要有 */
        content: "在之后插入的内容";
        color: red;
        margin-left: 20px;
    }

    /* 用来存放 只有装饰作用, 没有交互作用的小图标 */
    ul>li:after{
        /* content 内容, content 可以未空, 但必须要有 */
        content: "";
        width: 10px;
        height: 10px;
        background-image: url("https://shop.vipstatic.com/img/common/header_sign-hash-0459d02c.gif?dd7841df");
        background-position: 0 -3px;
        display: inline-block;
    }

在这里插入图片描述

前端畑鹿惊

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
2021-07-15 其他伪类选择器及伪元素选择器

1.其他伪类选择器也有很多例如：:first-of-type 选中第一个指定元素:last-of-type 选中最后一个指定的元素:nth-child(n) 选中第n个元素:nth-of-type(n) 选中第n个指定的元素:only-child 选中唯一一个的子元素:only-of-type 选中唯一的指定元素:empty 选中没有任何子元素(元素里面不能有任何的内容)的空元素:checked 选中页面中被选中的单选框或复选框:enabled 选中页面中, 处于可用(没有被禁用)的元
复制链接

扫一扫