我要招人

去企业版

首页 > 试题广场 >

以下的代码，从上到下标签的背景色依次是

[单选题]

以下的代码，从上到下 <img> 标签的背景色依次是

```
blue / red / blue / red / blue / orange
```
```
blue / red / blue / red / blue / blue
```
```
blue / red / blue / blue / red / blue
```
```
red / blue / blue / blue / blue / red
```

查看答案及解析

疯五

        .list>p:nth-child(even) img {
            background: red;
        }

这个是指.list下的子代p的所有兄弟p p div p div(不包括兄弟的儿子) 的偶数位,p(奇) p(偶) div(奇) p(偶) div(奇),命中第2和第5个img 红色

        .list>p:last-child img {
            background: orange;
        }

这个是指.list下的子代p的所有兄弟p p div p div(不包括兄弟的儿子)的最后1个元素p(如果是p,则p)为橙色,但最后1个元素是div,不是p,所以这个属性是无效的,最后1个img是蓝色. p:last-child等同于p:nth-last-child(1)

        .list>div:last-child img {
            background: orange;
        }

如果改成这样,指.list下的子代div的所有兄弟p p div p div(不包括兄弟的儿子)的最后1个元素div 为橙色,而刚好例子中最后1个元素是div,所以最后img是橙***r />

w3c上面解释太简洁了,还不明确.

发表于 2020-08-15 02:49:55 回复(5)

aSuncat

一、.list img
1、设置所有<img>背景为blue。

2、所以是blue blue blue blue blue blue

二、.list>p:nth-child(even) img
1、设置p为直接的偶数子元素时，<img>背景为red。
2、（1）even：偶数
（2）.list有直接子元素共5个：<p>、<p>、<div>、<p>、<div>。
（3）.list>p:nth-child(2)、.list>p:nth-child(4)的<img>被设置成红色。

3、所以是blue red blue blue red blue

三、.list>p:last-child img
1、设置p为.list的最后一个直接子元素时，<img>背景为orage。
2、这题的最后一个直接子元素是div，所以该css设置无效。
3、所以仍然是blue red blue blue red blue

发表于 2021-11-08 17:00:07 回复(4)

飞向星辰大海

p:last-child是要p在最后一个元素才有效

发表于 2020-11-23 15:15:37 回复(3)

小夏夏^o^

* 菜鸟回答，有不对的还望指正：）

.list img的权重最小是{0,0,1,1}，所以先把所有img的背景色都看成blue

接下去两个选择器的权重是一样的，我们只需要考虑是不是有会变色的img。.list>p:last-child会选择到的元素明显很少，所以先看这个。

.list>p:last-child img：<div class="list">的子元素中所有的<p>元素，这些<p>元素中如果有某些是<div class="list">的最后一个子元素，则这些<p>元素被选择。<div class="list">的最后一个子元素是<div class="sub-list">，所以没有元素的背景色会变为orange。

.list>p:nth-child(even) img：<div class="list">的子元素中所有的<p>元素，这些<p>元素中如果有某些是<div class="list">的第偶数个子元素，则这些<p>元素被选择。<div class="list">的所有子元素分别为<p>、<p>、<div class="sub-list">、<p>、<div class="sub-list">，有两个<p>会被选择。算上<div class="sub-list">包含了2个，因此是答案中的第2、第5变成red。

发表于 2020-11-02 00:08:44 回复(0)

Zhave

因为list的最后一个孩子不是p所以没有orange

发表于 2021-09-11 11:09:51 回复(0)

牛客832815797号

>意思是选择所有的子元素，>p是选择所有子元素并且标签为p >p：nth-child（even）是选择所有子元素中标签为p且为所有元素中为偶数的

发表于 2022-02-24 13:09:33 回复(0)

春招年薪x冲冲冲

p:last-child是要p在最后一个元素才有效

发表于 2021-02-10 16:39:27 回复(0)

蒲公英想养花

.list>p：nth-child（even）选择list下所有子元素中满足是p标签且是奇数位子元素的标签； .list>p：last-child仅当list下子元素的最后一个元素为p标签时才会生效。

发表于 2022-04-08 11:43:22 回复(1)

于さん

倒数第二个不应该是orange吗

发表于 2022-03-02 09:15:48 回复(0)

牛客275957105号

.list>p :nth-child(even)
在class=list的所有元素的偶元素中，如果是p元素，则被选中。

发表于 2021-07-17 20:46:59 回复(0)

hongweizhu_com

> 直接后代，所以倒数134为蓝色，所以答案c

编辑于 2020-12-14 14:34:20 回复(0)

hungry_&_foolish

关于那个orange我的理解

1）  p:last-child这个伪类p之前没写元素就意味着只要 ---------- p元素是某个父的*最后*一个儿子，就有样式
* 注意两点：1.没写父亲,意味着p可以是任意元素的儿子

     2.最后：不是同类型p的最后，而是他的便宜父亲所有儿子的最后，如果便宜父亲最后的儿子不是p是div什么乱七八糟的，那么没有效果

2）若list > p:last-child: 就意味着p不可以随便认父亲了，他只可以存在于list的儿子；且是list所有的儿子的最后儿子

所以：这个orange样式中【list的最后一个儿子是class="sub-list"的div,不是p,不满足条件！！！】

编辑于 2021-12-10 16:40:48 回复(0)

牛客369274160号

https://blog.csdn.net/weixin_44710964/article/details/104502602

发表于 2021-04-17 17:13:55 回复(0)

会玩代码的猫

因为div下最后一个是div sub_list，所以last child没有找到p下面的img，而最后一个p img，是属于倒数第二个所以不是橙色

发表于 2023-06-20 20:02:48 回复(0)

牛客702620602号

为什么.list>p:nth-child(even) img 会选中子代div里的img啊？倒二个为什么是红色，选择器选的不是list的子代p标签的偶数个img吗？求解惑

发表于 2022-10-22 18:22:23 回复(1)

calm0_0

nth-child 是从1 开始的

空格表示子孙img 都是该样式

> 表示亲儿子才有权力显示该样式

发表于 2021-05-11 10:42:08 回复(0)

牛客939829798号

注意里面的还是是p和div，不能排除div直接找p作为孩子来看。

发表于 2021-03-23 22:16:48 回复(0)

提交观点

问题信息

CSS

上传者：小小

难度：

17条回答 1148收藏 1853浏览

以下的代码，从上到下标签的背景色依次是

问题信息

热门推荐

相关试题

以下的代码，从上到下 标签的背景色依次是

问题信息

热门推荐

相关试题

以下的代码，从上到下标签的背景色依次是