Question

在做了一些谷歌搜索后，我无法得出答案，所以这是我的问题。有没有办法指定一个特定的元素特征，比如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中包含的规则应仅应用于#my_id中匹配的元素，类似于在样式表中的每个规则之前指定#my_id。

我理解在每个规则实现此目的之前指定#my_id，但我想知道是否有办法在不需要向样式表添加膨胀的情况下执行此操作。

我正在使用greasemonkey（userscript）脚本，该脚本在特定页面上创建一个“容器”元素，在该页面中创建并放置所需的所有其他GUI元素。我不希望我的CSS干扰页面上的CSS（例如不小心写了页面上已经存在的规则），但是如果可以避免因为所有规则都可以避免在我的样式表中添加不必要的膨胀只有才能应用于'wrapper'元素和/或它的子元素。

Answer 1

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

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

Answer 2

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

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

编辑：其他（丑陋）选项是使用iframe而不是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>

P.S：别忘了添加doctype。为简单起见，我没有在示例中添加它。

Answer 3

您可以使用＆gt;将样式应用于#my_id中的元素选择。例如：

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

#my_id > p {
  /* this will style all p tags within #my_id */
}

将样式表仅应用于特定元素特征

3 个答案: