css - 在标签混乱中设置标签样式

Question

我很难理解下面显示的这种类型的 css 选择器，或者至少是如何应用。

p .intro a { color: yellow }

Answer 1

p .intro a { color: yellow }

它会设置任何样式（从右到左阅读）

• a标签
• 这是任何带有类的标签的后代（点是类选择器）intro
• 这是p标签的后代

示例（请注意，这些元素不是直接子元素，而是后代）：

<p>
    <span>
        <span class="intro">
            <span>
                <a href="#">I am yellow</a>
            </span>
        </span>
    </span>
</p>

（小提琴）

Answer 2

此选择器将匹配类似于以下内容的 HTML：

<p>
    <span class="intro">
        <a href="#">I am yellow</a>
    </span>
</p>

基本上，a标签内的标签与标签内的intro类p。他们不必是直系子女。

Answer 3

您的 jsFiddle 示例由于语义而失败。窥视一下：在 <p> 标签内嵌套块级元素......对还是错？

所以你可以做的就是改变你的标记，例如：

<p>
    <span class="intro">
        <a href="#">I AM yellow</a>
    </span>
</p>

或者

<div>
    <div class="intro">
        <a href="#">I AM yellow</a>
    </div>
</div>