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> .item:nth-child(2)
.item:nth-child(3)
.item:nth-child(4)
.item:nth-child(5)
试试看 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
是这样吗
谢谢回复。
当然不是,关键是item会随机夹杂着其他元素,难点就在这里。
就是用+号兄弟选择器的实现不了。 <style type="text/css">
.content>p.item+p+p.item {
background-color: yellow;
}
.content>p.item+p.item {
background-color: yellow;
}
</style> 那你用jq得了 使用id选择器 你的需求都没说清楚。。
可以尝试jQuery
$('.content .item').each(function () {
console.log(($(this).val()))
})