css - 用于设置单词“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）可以受span具有 class 的选择器影响a，但 (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嵌套在具有类的标签下的 bar 单词a

---

所以从技术上讲，答案是所有这些都会改变酒吧的颜色

Answer 2

以上都是正确答案，因为：

span.a        /* Selects all span elements with class 'a' */
p .a          /* Selects all child elements of p that have class 'span' */
.a span       /* Selects all child span elements of elements with class 'a' */ 

Answer 3

父子关系。在所有这些中，您都在选择父母并导航到第一个孩子。如果您有一个列表，则必须使用第 n 个子选择器浏览选择器。

Answer 4

这一切都非常简单，这里是对 CSS 解释的英文演练：

2）find <p>（行），然后在里面<p>使用class="a"，所以这是 <span class="a">bar</span>
3）findclass="a"然后在里面<span>