首页 新闻 赞助 找找看

css | 如何选中所有后代元素的偶数项?

0
悬赏园豆:180 [待解决问题]

如何选中 .outer 后代元素中的所有偶数项p元素。

<div class="outer">
    <div class="item">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>
    <div class="item">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>
    <div class="item">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>
    <div class="item">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>
</div>
guangzan的主页 guangzan | 菜鸟二级 | 园豆:246
提问于:2020-05-24 19:35
< >
分享
所有回答(4)
0

.outer p:nth-child(even){
}

这样?网上一搜一大堆吧?

顾晓北 | 园豆:10844 (专家六级) | 2020-05-24 19:58

你没有理解题目的意思或者你没有理解 :nth-chil(even) ,请自行试一试。

支持(0) 反对(0) guangzan | 园豆:246 (菜鸟二级) | 2020-05-25 13:57

@DIVMonster: 你不会是想第二个

<div class="item">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>

这里面的p也当成偶数吧?

支持(0) 反对(0) 顾晓北 | 园豆:10844 (专家六级) | 2020-05-25 15:48

支持(0) 反对(0) 顾晓北 | 园豆:10844 (专家六级) | 2020-05-25 15:49

这不是你想要的效果?你想要的是整个的所有的p来算偶数的?

支持(0) 反对(0) 顾晓北 | 园豆:10844 (专家六级) | 2020-05-25 15:50

@顾晓北: 标题写的是后代元素,而不是最后一个item里的偶数项。

支持(0) 反对(0) guangzan | 园豆:246 (菜鸟二级) | 2020-05-25 15:52

@DIVMonster: 那你给p定一个class不就完了?话说,还真没碰到过这种需求。。。

支持(0) 反对(0) 顾晓北 | 园豆:10844 (专家六级) | 2020-05-25 15:59
-1

看看我的问题-》 https://q.cnblogs.com/q/127498/

HDWK | 园豆:152 (初学一级) | 2020-05-24 20:29
0

p标签下的奇数行与偶数行

.outer p:nth-child(odd){} //奇数行

.outer p:nth-child(even){} //偶数行

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。

熊泽-学习中的苦与乐 | 园豆:2267 (老鸟四级) | 2020-05-25 09:09

谢谢,不过这样只会选中最后一组 item 里的 p。

支持(0) 反对(0) guangzan | 园豆:246 (菜鸟二级) | 2020-05-25 13:58

他是想所有的p来算偶数。。。

支持(0) 反对(0) 顾晓北 | 园豆:10844 (专家六级) | 2020-05-25 15:51

@DIVMonster: 嗦嘎,简单,看下面的操作

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>如何选中 .outer 后代元素中的所有偶数项p元素。</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(function () {
for (var i = 1; i <= 9; i++) {
if (i % 2 == 0) {
$("#item" + i + "").css("color", "red")
}
}
})
</script>

</head>
<body>
<div class="outer">
<div class="item">
<p id="item1">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="item">
<p id="item2">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="item">
<p id="item3">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="item">
<p id="item4">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p id="item5">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p id="item6">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p id="item7">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p id="item8">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p id="item9">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
</body>
</html>

支持(0) 反对(0) 熊泽-学习中的苦与乐 | 园豆:2267 (老鸟四级) | 2020-05-25 19:44

@顾晓北: 这个简单,全部使用动态的,然后给p标签一个从1到n的ID,然后i%2==0为偶数,想干嘛就干嘛啦

支持(0) 反对(0) 熊泽-学习中的苦与乐 | 园豆:2267 (老鸟四级) | 2020-05-25 19:47

我在博客园、思否、掘金都提了同样的问题,有多少人都没有搞清楚 :nth-child 是用来干什么的。只有思否一位小伙伴提供了一个正确答案但不在这题范畴内,他先给我普及了nth-child 的知识然后告诉我只能用 JavaScript 来实现。

支持(0) 反对(0) guangzan | 园豆:246 (菜鸟二级) | 2020-05-25 19:49

@DIVMonster: 恩恩,我是做后端的,遇到前端问题我一般都直接使用JavaScript或者jQuery来实现,简单粗暴,特定的属性的话估计只有百度了

支持(0) 反对(0) 熊泽-学习中的苦与乐 | 园豆:2267 (老鸟四级) | 2020-05-25 19:51

@熊泽-学习中的苦与乐: 谢谢

支持(0) 反对(0) guangzan | 园豆:246 (菜鸟二级) | 2020-05-25 20:57

@DIVMonster: 然后呢?你来园子是想看看是不是还有其他方法?
我觉得吧,你这题目都没说清楚想要实现什么样的效果,直接说偶数,那所有人当然就认为,就正常的偶数而已。。。
上面还让我自己试一试,搞得我还以为我的语法有问题。。。

支持(0) 反对(0) 顾晓北 | 园豆:10844 (专家六级) | 2020-05-26 09:32

@顾晓北:哈哈哈 , 是的, 这个目前用 css 无解,由css选择器的匹配规则决定的。

支持(0) 反对(0) guangzan | 园豆:246 (菜鸟二级) | 2020-05-27 13:25

@顾晓北:

我应该放个图的,我的表述的确容易让人误解,目前我从社区得到的最好的方法就是使用 JavaScript 来选中它们。谢谢你的回复。

支持(0) 反对(0) guangzan | 园豆:246 (菜鸟二级) | 2020-05-27 13:33
0

.item-child(even)>p

墨_鱼 | 园豆:595 (小虾三级) | 2020-10-16 11:27

没有这种写法

支持(0) 反对(0) guangzan | 园豆:246 (菜鸟二级) | 2020-10-16 16:25

@GZ^: 不好意思,写误了.item:nth-child(even) > p{
background:red
}
这样子

支持(0) 反对(0) 墨_鱼 | 园豆:595 (小虾三级) | 2020-10-16 16:33

@墨_鱼:

支持(0) 反对(0) guangzan | 园豆:246 (菜鸟二级) | 2020-10-16 23:33
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册