首页 > 试题广场 >

请选出3的颜色 ul { col...

[单选题]

请选出3的颜色
<style>
ul { color: blue !important; }
ul > li { color: green; }
ul li + li { color: red; }
li { color: yellow; }
</style>

<ul><li>1</li><li>2</li><li>3</li></ul>

```
蓝色
```
```
绿色
```
```
红色
```
```
黄色
```

查看答案及解析

胡66

ul > li 表示ul下面的子级元素；ul li+li表示ul下的第一个li的所有兄弟li节点。

由于权重ul li+li 大于 ul>li，所以选择ul li+li所在的选项。具体权重如何计算，我倒是忘记了，知道的同学可以补一下。

发表于 2021-05-19 20:39:06 回复(0)

能进外包就算成功

根据mdn https://developer.mozilla.org/zh-CN/docs/Web/CSS/Adjacent_sibling_combinator

相邻兄弟选择器 (+) 介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。

而这里并没有指明第一个元素就是最前面的哪一个li，所以每一个li都会找自己的兄弟，结果就是除了第一个li以外的所有li都被选中了。效果看起来和li~li一样。但是实际上是不同的。

通用兄弟选择器~：兄弟选择符，位置无须紧邻，只须同层级，A~B 选择A元素之后所有同层级B元素。

如果只想找第一个li的相邻兄弟，应该用伪类:first-of-type，这样就会只选中第二个li。

li:first-of-type + li {
  color: red;
}

优先级计算

一个选择器的优先级可以说是由四个部分相加 (分量)，可以认为是个十百千 — 四位数的四个位数：

千位：如果声明在 style 的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是1000。
百位：选择器中包含ID选择器则该位得一分。
十位：选择器中包含类选择器、属性选择器或者伪类则该位得一分。
个位：选择器中包含元素（类型）、伪元素选择器则该位得一分。
1. 通用选择器 (*)，组合符 (+, >, ~, ' ')，和否定伪类 (:not) 不会影响优先级。
2. 继承的属性优先级为0

选择器	千位	百位	十位	个位	优先级
h1	0	0	0	1	0001
h1 + p::first-letter	0	0	0	3	0003
li > a[href*="en-US"] > .inline-warning	0	0	2	2	0022
#identifier	0	1	0	0	0100
内联样式	1	0	0	0	1000

ul { color: blue !important; }//!important优先级最高，但是后面是继承的，所以为0
ul > li { color: green; } 有两个元素选择器，优先级为0002
ul li + li { color: red; }有3个元素选择器，优先级为0003
li { color: yellow; }一个元素选择器，优先级为0001

所以最终的结果是：

编辑于 2021-06-23 10:12:40 回复(0)

fisho1

正确答案是 C，红色。

这是因为HTML中的最后一个CSS规则给出了一个直接的颜色，但由于它不是ul > li的直接子元素选择器或者ul的重要选择器，它被其他规则覆盖。在此例中，ul > li选择器将所有li元素设置为绿色，但是ul li + li选择器更具体，它将所有ul中li元素之后的li元素设置为红色。因此，列表中的第一项是绿色，而第二和第三项是红色。由于ul li + li的特异性高于ul > li，列表中的"3"是红色。

发表于 2024-01-16 22:42:59 回复(0)