0

我正在开发一个带有示例的项目，该示例可以简化为以下内容。CSS 中使用的技术的名称是什么？

<html>
    <head>
        <style type="text/css">
        #numberone #numbertwo #numberthree
        {
            color: red;
        }
        </style>
    </head>
    <body>
        <div id="numberone">
            <div id="numbertwo">
                <div id="numberthree">
                    This is red
                </div>
            </div>
        </div>
        <div id="numberthree">
            This is not red
        </div>
    </body>
</html>
4

1 回答 1

4

我假设您指的是使用后代组合器来定位具有特定祖先结构的元素。从规范：

后代组合器是分隔两个简单选择器序列的空格。“A B”形式的选择器表示元素 B，它是某个祖先元素 A 的任意后代。

我将修改您的 CSS 以使用类选择器而不是 ID 选择器，因为 ID 值在文档中必须是唯一的。此示例将选择具有类名numberthree的元素，这些元素是具有类名的元素的numbertwo后代，并且是具有类名的元素的后代numberone：

.numberone .numbertwo .numberthree {
    color: red;
}

而此示例将选择具有类名的所有元素，numberthree而不管它们的祖先如何：

.numberthree {
    color: red;
}

因此，鉴于您的示例标记（再次修改为使用类），以下内容将适用：

<div class="numberone">
    <div class="numbertwo">
        <div class="numberthree">
            This is red for both snippets above
        </div>
    </div>
</div>
<div class="numberthree">
    This is only red for the second snippet above
</div>
于 2012-07-02T09:00:01.027 回答