选择器的使用

一个尚在学习的计算机小白

已于 2023-08-11 21:13:56 修改

阅读量168

点赞数

分类专栏：前端文章标签： css javascript 前端

于 2023-07-30 22:44:42 首次发布

本文链接：https://blog.csdn.net/qq_52396030/article/details/132011382

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

层级选择器

/*子代选择器：选出box下的所有li标签*/
        .box>li{
            background-color: aliceblue;
        }
        /* 选出box后面的第一个兄弟li标签 */
        .box+li{
            background-color: aliceblue;
        }
        /* 选出box后面的所有兄弟li标签 */
        .box~li{
            background-color: aliceblue;
        }

属性选择器

/* 属性选择器:选出所有带有class属性的标签 class也可以为其他属性 */
        [class]{
            background-color: aliceblue;
        }
        /* 属性选择器:选出所有带有class属性的div标签 class也可以为其他属性 */
        div[class]{
            background-color: aliceblue;
        }
        /* 属性选择器:选出所有带有class=box1属性的div标签 class也可以为其他属性 */
        div[class=box1]{
            background-color: aliceblue;
        }

        /* 属性选择器:选出所有class属性以b开头的div标签 class也可以为其他属性 */
        div[class^=b]{
            background-color: aliceblue;
        }
        /* 属性选择器:选出所有class属性以b结尾的div标签 class也可以为其他属性 */
        div[class$=b]{
            background-color: aliceblue;
        }
        /* 属性选择器:选出所有class属性包含b的div标签 class也可以为其他属性 */
        div[class*=b]{
            background-color: aliceblue;
        }
        /* 属性选择器:选出所有带有class属性中包含box1的div标签 class也可以为其他属性 */
        div[class~=box1]{
            background-color: aliceblue;
        }

伪类选择器

结构伪类选择器

/* 结构伪类选择器 */
        /* 选择box下的最后一个div标签 */
        .box div:last-child{
            background-color: aliceblue;
        }
        /* 找到第一个li标签 */
        li:first-child{
            background-color: aliceblue;
        }
        /* 找到最后一个li标签 */
        li:last-child{
            background-color: aliceblue;
        }
        /* 找到第二个li标签 */
        li:nth-child(2){
            background-color: aliceblue;
        }
        /* 找到第偶数个li标签，2n可以用even代替 */
        li:nth-child(2n){
            background-color: aliceblue;
        }
        /* 找到第奇数个li标签，2n-1可以用odd代替 */
        li:nth-child(2n-1){
            background-color: aliceblue;
        }

目标伪类选择器

/* 目标伪类选择器：隐藏锚点的导向位置 */
div.content{
    display: none;
}
div.content:target{
    display: block;
}

状态伪类选择器

    <style>
        /* 
            状态伪类选择器（checkbox有默认样式，需要清楚默认样式才能使用）
                enabled:可用标签选择
                disabled：禁用标签选择
                focus：聚焦选择器，作用于焦点标签

         */
         /* 去掉checkbox的默认样式 */
         input[type=checkbox]{
            appearance: none;
            width: 20px;
            height: 20px;
            background: red;
         }

         input:enabled{
            background: red;
         }

         input:disabled{
            background: yellow;
         }
        
         input:focus{
            background: blue;
         }

         /* 选择状态伪类选择器（当文字被选中时的状态） */

         div::selection{
            background: red;
            color: blue;
         }
    
    </style>
</head>
<body>
    <!-- 
        层级选择器
     -->
     <form action="">
        用户名: <input type="text"><br>
        密码： <input type="password"><br>
        记住用户名: <input type="checkbox">
        <input type="submit" disabled>
     </form>

     <div>
        dsfgbahjshfaslhfasdhfasddhfasdhfjasdhfoiasd
     </div>


</body>