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>

(fiddle)

Answer 2

此选择器将匹配与此类似的HTML：

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

基本上，a标记内的intro标记内容为p。他们不一定是直接的孩子。

Answer 3

由于语法错误，您的jsFiddle示例失败。窥视：Nesting block level elements inside the <p> tag... right or wrong?

所以你可以做的就是将你的标记更改为，例如：

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

或

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

标签内的样式标签混乱

3 个答案: