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

CSS选择器的问题

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


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

<!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

<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()))
})
页: [1] 2 3 4
查看完整版本: CSS选择器的问题