强大的选择器虐我千百遍

最新推荐文章于 2023-10-10 15:14:55 发布

richest_qi

最新推荐文章于 2023-10-10 15:14:55 发布

阅读量455

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qzw752890913/article/details/105959941

版权

css 专栏收录该内容

69 篇文章 4 订阅

订阅专栏

后代选择器

空格
后面所有的后代，包括儿子元素，孙子元素等等等

相邻后代选择器

>
又称子选择器，仅儿子元素

兄弟选择器

~
后面所有的兄弟元素

相邻兄弟选择器

+
仅后面相邻的兄弟元素

first-child

选中ul的第一个li，li:first-child

    .sidebar{
        list-style: none;
        padding:0;
    }
    .sidebar li{
        padding:0.5em;
    }
    .sidebar a{
        text-decoration: none;
        color:lightgray;
    }
    .sidebar a:hover{
        color:gray;
    }
    .sidebar a:active{
        color:black;
    }
    .sidebar li:first-child a{
        color:black;
    }

<ul class="sidebar">
    <li><a href="#1">Hello world</a></li>
    <li><a href="#2">Installation</a></li>
</ul>

在这里插入图片描述

li:first-child
首先，li的父元素，是ul
然后，父元素ul的所有子元素中的第一个是li
最后，属于第一个子元素的所有li元素
所以，li:first-child就是<li><a href="#1">Hello world</a></li>

nth-child(n)/nth-of-type(n)

        div:nth-child(1){
            color:yellow
        }
        div:nth-of-type(1){
            font-size:48px;
        }
        p:nth-child(2){
            color:red;
        }
        p:nth-of-type(2){
            color:blue
        }

<body>
    <div>hello world</div>
    <p>热干面加油</p>
    <p>炸酱面加油</p>
</body>

在这里插入图片描述

div:nth-child(1)
首先，div的父元素，是body
然后，父元素body的所有子元素_{索引从1开始} 的第1个，是div
最后，属于第1个子元素的所有div
所以，div:nth-child(1)就是<div>hello world</div>
p:nth-child(2)
首先，p的父元素，是body
然后，父元素body的所有子元素_{索引从1开始} 的第2个，是p
最后，属于第2个子元素的所有p
所以，p:nth-child(2)就是<p>热干面加油</p>
p:nth-of-type(2)
首先，p的父元素，是body
然后，父元素的所有为p的子元素_{索引从1开始} 的第2个，是p
最后，属于第2个子元素的所有p
所以， p:nth-of-type(2)就是<p>炸酱面加油</p>

属性过滤选择器

:disabled 选中被禁用元素

       :disabled{
           cursor:not-allowed;
       }

在这里插入图片描述

[disabled] 选中拥有disabled属性的元素

    [disabled]{
        cursor:not-allowed;
    }

在这里插入图片描述

[aria-disabled="true"] 选中拥有aria-disabled属性，且该属性值为true的元素

    [aria-disabled=false]{
        cursor:not-allowed;
    }

在这里插入图片描述

richest_qi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
强大的选择器虐我千百遍

属性过滤选择器:disabled 选中被禁用元素:disabled{ cursor:not-allowed}[disabled] 选中拥有disabled属性的元素 [disabled]{ cursor:not-allowed; }[aria-disabled="true"] 选中拥有aria-disabled属性，且该属性值为...
复制链接

扫一扫