CSS选择器的问题

cqwcns · 发表于 2021-10-18 21:40

CSS如何可以按类名，选中非第一个元素。

以以下Demo为例，我希望选择“第2个item”、“第3个item”、“第4个item”、“第5个item”。
不知道要怎么选，谢谢指教。

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .content .item:not(first-child) {
            background-color: yellow;
        }
    </style>

</head>

<body>

    <div class="content">
        <p>第1个元素</p>
        <p>第2个元素</p>
        <p class="item">第3个元素,而且是第1个item</p>
        <p>第4个元素</p>
        <p class="item">第5个元素,而且是第2个item</p>
        <p class="item">第6个元素,而且是第3个item</p>
        <p class="item">第7个元素,而且是第4个item</p>
        <p>第8个元素</p>
        <p class="item">第9个元素,而且是第5个item</p>
        <p>第10个元素</p>


    </div>



</body>

</html>

13599383608 · 发表于 2021-10-18 22:00

  .item:nth-child(2)
  .item:nth-child(3)
  .item:nth-child(4)
  .item:nth-child(5)
试试看

cqwcns · 发表于 2021-10-18 22:07

13599383608 发表于 2021-10-18 22:00
.item:nth-child(2)
.item:nth-child(3)
.item:nth-child(4)

谢谢回复。

但这个不行，等于把代码写死了。

我以上只是一个例子，实际情况有各种各样的，item数量也不定。

52pengcheng · 发表于 2021-10-18 22:19

提示: 作者被禁止或删除内容自动屏蔽

cqwcns · 发表于 2021-10-18 22:26

52pengcheng 发表于 2021-10-18 22:19
是这样吗

谢谢回复。

当然不是，关键是item会随机夹杂着其他元素，难点就在这里。

就是用+号兄弟选择器的实现不了。

ljl9090 · 发表于 2021-10-18 22:38

[HTML] 纯文本查看 复制代码

<style type="text/css">
    .content>p.item+p+p.item {
        background-color: yellow;
    }
    .content>p.item+p.item {
        background-color: yellow;
    }
</style>

墨墨殿下 · 发表于 2021-10-18 22:42

那你用jq得了

SuiY · 发表于 2021-10-18 23:13

使用id选择器

徒想er · 发表于 2021-10-18 23:33

你的需求都没说清楚。。

Lohraki · 发表于 2021-10-19 00:00

可以尝试jQuery
$('.content .item').each(function () {
console.log(($(this).val()))
})

帐号		自动登录	找回密码
密码			注册[Register]

52pengcheng 52pengcheng 当前离线好友阅读权限 0 听众最后登录 1970-1-1 头像被屏蔽	52pengcheng 发表于 2021-10-18 22:19 《站点帮助文档》有什么问题来这里看看吧，这里有你想知道的内容！提示: 作者被禁止或删除内容自动屏蔽
	呼吁大家发布原创作品添加吾爱破解论坛标识！
	回复支持 2 举报

[求助] CSS选择器的问题

免费评分

个人中心