强大的选择器 虐我千百遍

first-child

  • 选中ul的第一个lili: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就是
  • Hello world

  • 强大的选择器 虐我千百遍_第1张图片

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>

强大的选择器 虐我千百遍_第2张图片

  • div:nth-child(1)
    首先,div的父元素,是body
    然后,父元素body的所有子元素索引从1开始 的第1个,是div
    最后,属于第1个子元素的所有div
    所以,div:nth-child(1)就是
    hello world
  • p:nth-child(2)
    首先,p的父元素,是body
    然后,父元素body的所有子元素索引从1开始 的第2个,是p
    最后,属于第2个子元素的所有p
    所以,p:nth-child(2)就是

    热干面加油

  • p:nth-of-type(2)
    首先,p的父元素,是body
    然后,父元素的所有为p的子元素索引从1开始 的第2个,是p
    最后,属于第2个子元素的所有p
    所以, p:nth-of-type(2)就是

    炸酱面加油


    强大的选择器 虐我千百遍_第3张图片
属性过滤选择器
  • :disabled 选中被禁用元素
       :disabled{
           cursor:not-allowed;
       }

在这里插入图片描述

  • [disabled] 选中拥有disabled属性的元素
    [disabled]{
        cursor:not-allowed;
    }

在这里插入图片描述

  • [aria-disabled="true"] 选中拥有aria-disabled属性,且该属性值为true的元素
    [aria-disabled=false]{
        cursor:not-allowed;
    }

在这里插入图片描述

你可能感兴趣的:(css基础)