css3 伪类child详解

最新推荐文章于 2022-11-28 22:50:35 发布

我又懂了

最新推荐文章于 2022-11-28 22:50:35 发布

阅读量619

点赞数

分类专栏： css基础知识

原文链接：https://www.cnblogs.com/Wayou/p/css3-nth-selector.html

版权

css基础知识专栏收录该内容

13 篇文章 0 订阅

订阅专栏

话不多说，代码刚起来。

 <nav >
         <ul>
            <li>item01</li>
            <li>item02</li>
            <li>item03</li>
            <li>item04</li>
            <li>item05</li>
            
        </ul>
        <div>
            <span>你好</span>
        </div>
    </nav>

ul:last-child ,ul:first-child 选中第一个/最后一个ul，child并不代表子元素，而是同级元素。ul:first-child{ border: 3px double red; }
匹配所有兄弟节点中位置位于an+b位置的元素;其中a，b可以随意取值，n依次增加得到值。例如a=1，b=1;n=1时选中1*1+1=2位元素。通常由2n+1,2n分别选中奇数、偶数位置的元素。nth-child(odd) | nth-child(even) 也可以用来表示奇数偶数元素

   li:nth-child(2n+1){
        color: red;
    }
    li:nth-child(2n){
        color: blue;
    }

在这里插入图片描述
将a设置位0，即可选中单个元素，例如选中第三个li,设置字体颜色位绿色

li:nth-child(3){
        color: seagreen;
    }

在这里插入图片描述
将a设置成1，nth-child(nn++b) , n从0依次增加,即选中从b开始的后面所有元素。

li:nth-child(n+3){
        color: seagreen;
    }

在这里插入图片描述
3. 如果我们在item03前加一个section标签，依旧对第三个元素添加字体颜色

<nav >
        <ul>
            <li>item01</li>
            <li>item02</li> 
            <section>section2</section>
            <li>item03</li>
            <li>item04</li>
            <li>item05</li>
            
        </ul>
        <div>
            <span>你好</span>
        </div>
    </nav>

在这里插入图片描述
但是第三个li并没有效果。但是如果我们使用li:nth-of-type(3){ color: seagreen; }就可以实现

nth-of-type()用法和nth-child()用法类似，但是 nth-of-type()可以追踪找到这个类型的第几个元素，但是nth-child()一旦没有找到该元素（比如上例这种中间插入其他元素）就会放弃给与的样式。