CSS关于选择器 :nth-child(n)

最新推荐文章于 2024-08-26 16:48:02 发布

violet_Y_y

最新推荐文章于 2024-08-26 16:48:02 发布

阅读量731

点赞数

分类专栏： HTML+CSS

本文链接：https://blog.csdn.net/laurel_y/article/details/70332611

版权

HTML+CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

之所以要单开一篇博文写这个选择器，是因为我在刷题的时候发现这个选择器的定义是：匹配属于其父元素的第 N 个子元素，不论元素的类型。

（1）我不太明白所谓的“不论元素的类型”是什么意思，刚开始我以为是不论标签元素类型，也就是说选择当前标签E的父级元素的第N个子元素，不论这个元素是否是E标签，但是我写了一个例子，发现如果该元素不是E标签，那么选择符无效，详见代码：

<!DOCTYPE html>
<html>
<head>
    <style> 
        p:nth-child(3n+0){
            background:#ff0000;
        }
    </style>
</head>
<body>
    <h1>这是标题</h1>
    <p>第一个段落。</p>
    <span>第二个段落。</span>
    <p>第三个段落。</p>
    <p>第四个段落。</p>
    <p>第五个段落。</p>
    <p>第六个段落。</p>
    <p>第七个段落。</p>
    <p>第八个段落。</p>
    <p>第九个段落。</p>
</body>
</html>

代码的效果图如下：

（2）接着我又设想，将这个选择器跟类选择器或者id选择器组合，这样就可以判断该选择器:nth-child(n)是否可以不受前面标签选择器的影响，从而实现筛选对象“不论元素的类型”。但是我查了一下网上的资料和相关的例子，没有发现有将类选择器与它组合的现象，并且写了一个例子校验一下，发现这种组合是无效的，代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
         <style> 
            /* p:nth-child(3n+0){
                background:#ff0000;
            } */
            .container:nth-child(1){
                background:#ff0000;
            }
        </style>
    </head>
    <body>
        <h1>这是标题</h1>
        <p class="container">第一个段落。</p>
        <span class="container">第二个段落。</span>
        <p class="container">第三个段落。</p>
        <p class="container">第四个段落。</p>
        <p class="container">第五个段落。</p>
        <p class="container">第六个段落。</p>
        <p class="container">第七个段落。</p>
        <p class="container">第八个段落。</p>
        <span class="container">第九个段落。</span>
    </body>
</html>

结果没有任何元素选中，因此看来这个选择器不能与id或者类选择符同时使用。

（3）我突然想到input标签的有几种类型，难道这个“不论元素的类型”指的其实是同标签的不同类型吗？再写一个例子试一下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
         <style> 
            input{
                display: block;
                width:250px;
                height:30px;
                margin:10px 15px;
                text-align: center;
            }
            input:nth-child(3){
                border:2px solid orange;
            }
        </style>
    </head>
    <body>
        <h2>这是标题</h2>
        <input type="text" value="第一个input元素，text类型"/>
        <input type="button" value="第一个input元素，button类型"/>
        <input type="password" value="第一个input元素，password类型"/>
        <input type="submit" value="第一个input元素，submit类型"/>
        <input type="reset" value="第一个input元素，reset类型"/>
    </body>
</html>

效果如下：