我要招人

去企业版

首页 > 试题广场 >

...

[单选题]

div.demo{

color: black;

}

div.wrap .demo{

color: yellow;

}

div.wrap > .demo{

color: blue;

}

div.wrap + .demo{

color: red;

}

div.demo + .demo{

color: red;

}

</style>

Hello

</div>

World

</div>

Hello 和 world 两个单词分别是什么颜色？

```
black, black
```
```
yellow, blue
```
```
blue, red
```
```
blue, blue
```

查看答案及解析

盯着面筋唱征服

1. div.demo 元素与类样式交集选择器 Hello World 为黑色

2. div.wrap .demo 覆盖样式1 Hello World 为黄色

3. div.wrap > .demo 覆盖样式2 Hello World 为蓝色

4. div.wrap + .demo 选择在 div.wrap 后的第一个兄弟元素并且类样式为 .demo 的元素为红色, 没有选中任何元素，此选择器无效

5. div.demo + .demo 选择在 div.demo 后的第一个类样式为 .demo 的兄弟元素设置为红色, World 变成红色,Hello 还是蓝色

编辑于 2019-03-09 19:30:09 回复(6)

更多回答

offer快到碗里来呀~

发表于 2020-08-11 11:32:48 回复(0)

alaa

.a，.b｛“，”指相同的css样式｝；

.a .b｛“ ”指后代元素｝；

.a>.b｛“>”指子代所有元素｝；

.a + .b｛这个“+”是选择相邻兄弟，叫做“相邻兄弟选择器”

例：h1 + p {margin-top:50px;}

这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。｝；

发表于 2019-03-07 10:21:00 回复(0)

喰學長『龘』

> 是直接子元素选择符，+ 是紧相邻兄弟元素选择符

发表于 2019-02-24 23:52:52 回复(0)

necoder0101

子选择符 hello yellow

后代选择符 hello world都为blue

相邻兄弟选择符两个都不变

相邻兄弟选择符 world:red

发表于 2019-02-27 11:30:54 回复(1)

没有钞能力

‘+’选择器则表示某元素后相邻的兄弟元素，也就是紧挨着的，是单个的。而‘~’选择器则表示某元素后所有同级的指定元素，强调所有的

发表于 2021-05-02 09:53:07 回复(0)

日晞呀

.a>.b｛“>”指子代所有元素｝； .a + .b｛这个“+”是选择相邻兄弟，叫做“相邻兄弟选择器”

发表于 2021-11-04 14:54:03 回复(0)

牛客840659598号

1.结合元素选择器，div.demo 元素被选择，Hello World 为黑色

2.后代选择器，div.wrap的后代demo被选择，Hello World为黄色

3.子元素选择器，div.wrap的子元素demo被选择，Hello World为蓝色（必须是子元素，如果demo上面还有一层父元素则不受影响）

例如：

这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响

h1 > strong {color:red;}

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

4 5.相邻兄弟选择器，+号两边的元素必须是同一个父级，即两人拥有相同的父元素，4中div.wrap和demo不是兄弟元素。5中的div.demo + .demo选择div.demo后的.demo元素，即相邻兄弟只选择第二个兄弟，所以第一个demo不变色，Hello仍为蓝色，第二个demo变为红色，World变为红色

发表于 2020-08-10 23:24:18 回复(0)