4

在做了一些谷歌搜索后，我无法想出答案，所以这是我的问题。有没有办法指定一个特定的元素特征，例如一个 id，应该在其中应用整个样式表？

例如，如果我有一个这样的 html 块

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="./style.css">
    </head>
    <body>
        <div id="my_id">
            <!-- A bunch of elements here -->
        </div>
    </body>
</html>

有没有办法指定包含的规则./style.css只应用于匹配元素 in #my_id，类似于#my_id在样式表中的每个规则之前指定。

我理解#my_id在每个规则之前指定将实现这一点，但我想知道是否有一种方法可以做到这一点而无需向样式表添加膨胀。

我正在编写一个greasemonkey(userscript) 脚本，它在特定页面上创建一个“容器”元素，并在其中创建并放置所有其他所需的GUI 元素。我不希望我的 CSS 干扰页面上的 CSS（例如意外覆盖页面上已经存在的规则），但如果可以避免的话，我不想在样式表中添加不必要的膨胀，因为所有规则仅适用于“包装”元素和/或其子元素。

4

3 回答 3

3

据我所知，这是不可能的。正如您所说，您可以在规则前加上 ID，但这不是您想要做的。

然而，我应该说，您不必为单个 ID 指定样式表，因为 ID 在页面上下文中应该是唯一的。此外，我发现将相同的 ID 应用于在不同页面上用于不同目的的元素是一种不好的做法，因为这会使编写常见的 JavaScript 页面变得非常混乱。

于 2012-12-05T08:21:21.477 回答
1

这也是人们开始使用SASS的原因之一。在 SASS 中，这就像将所有 css 类嵌套在 id 类中一样简单，如下所示：

#my_id {
  // all styles without editing
  // Now all these styles are applied only if they fall
  // under the element with id "my_id".
}

编辑：另一个（丑陋的）选项是使用 aniframe而不是 div 并在其中加载您的子元素和样式表，以便按如下方式将其沙箱化。

<html>
    <head></head>
    <body>
        <iframe id="my_id">
            <html>
                <head>
                    <link rel="stylesheet" type="text/css" href="./style.css" />
                </head>
                <body>
                    <!-- A bunch of elements here -->
                </body>
            </html>
        </iframe>
    </body>
</html>

PS：不要忘记添加文档类型。为简单起见，我没有在示例中添加它。

于 2012-12-05T08:27:01.640 回答
0

您可以使用 > 选择器将样式应用于 #my_id 中的元素。例子：

#my_id {
  /* some style for #my_id */
}

#my_id > p {
  /* this will style all p tags within #my_id */
}
于 2012-12-05T08:21:07.707 回答