用于样式化单词 "bar"的 CSS 选择器

Question

讲师在讲座中提出的问题:

哪个 CSS 选择器将只选择单词“bar”作为样式？

<p class="a">foo, <span class="a">bar</span></p>

1. span.a
2. p.a
3. .a span
4. 所有这些

给出的答案是(4)。

(1) 是显而易见的，因为只有 bar(而不是 foo)可以受到类 a< 的 span 选择器的影响，但 (2) 和 (3) 不太明显。有人会分解每种情况下发生的事情吗？

Answer 1

让我为你详细说明

span.a - 这将选择所有 span类别为 a 的文档中的标签

p.a - 这将选择所有 p具有类 a 的元素

p .a - 这将选择具有类 a 的所有元素嵌套在 p 下

.a span - 这将选择所有 span标签嵌套在类 a 下

解释你的情况

<p class="a">foo, <span class="a">bar</span></p>

a.span将更改条形颜色，因为它选择具有类 a 的跨度标签

p.a也会更改条​​形颜色，因为它嵌套在 p 中类为 a 的标签.因此 span标签将继承颜色。 (另外，我想在这里指出，这个选择器也会改变 foo 的颜色)

p .a也会选择栏，作为 span具有类 a 的标签嵌套在 p 下

.a span也会将颜色应用于条形词，如 span嵌套在类 a 的标签下

---

所以技术上的答案是所有这些都会改变条形颜色