将 CSS 文件附加到元素和子元素

Question

我目前正在为一些 CSS 样式创建一个库（也有一些是由 jQuery 定义的，所以请随意使用 JavaScript/jQuery 作为解决方案 - 我不无论哪种方式，都不认为正常的 CSS 是可能的）。

我有一些部分应该仅在具有特定 class 的父元素（在示例 .style-container 中）存在时应用。

当然可以通过在每个 CSS 选择器前添加 class 来实现。

虽然需要传输更多的数据，所以我想也许有可能应用 CSS 文件，它的内容只是针对特定元素，它是子元素而不是整个文档。

想象一下 CSS（大大简化）：

h1 {
   color: #f00;
   border-bottom: 1px solid #000;
}

本HTML文档（正文部分）：

<div class="style-container">
   <h1>This should be styled</h1>
</div>
<div>
   <h1>This should be standard style</h1>
</div>

现在可能有一些 JavaScript/jQuery 来加载带有 class 的所有元素及其子元素的文件。

注：

可能会通过 JavaScript/jQuery 出现以前没有出现过的新元素，我真的不想再次加载整个样式，因为那样可能会占用大量资源，在情况下内容变化非常快。

并且等待也不是一种选择，因为那样的话，在等待的时间内不会为元素设置样式。

编辑： 再次指出：我正在寻找一个比标准 CSS 子选择器更好的选项，它将像这样工作：

.style-container h1 {
   color: #f00;
   border-bottom: 1px solid #000;
}

我想要这个，因为它使用更多的数据从服务器传输到客户端。要理解这一点：我有一部分代码以最小化形式使用选择器和不使用选择器。有选择器的版本需要3698个字符，没有选择器的版本需要2538个字符。那是 1160 个字符的差异。或者，以 kB 为单位，我们有 3.61kB - 2.47kB = 1.14kB 的差异。这看起来很少，但它只是代码的一小部分。我期望代码是原来的十倍。相差 11.4kB。在我看来，这对于移动设备来说是一笔不小的数目...

Answer 1

这是基本的 CSS。

为元素的子元素（第一级子元素）设置 H1 样式（示例使用 div 但 div 可以替换为 .style-container 或任何 class / ID):

div > h1 {
    color: #f00;
    border-bottom: 1px solid #000;
}

您也可以简单地使用：

div h1 {
    color: #f00;
    border-bottom: 1px solid #000; 
}

后者适用于 div 内的所有 h1。

Answer 2

在您的情况下，与其每次都使用脚本加载样式来为元素设置样式，不如仅与 CSS 一起使用。因为 css 选择器在看到 DOM 中的选择器时会立即加载。 Css:

div.style-container> h1{
   color: #f00;
   border-bottom: 1px solid #000;
}

>表示在class.style-container之后直接h1。即只有children到它，而不是所有children到children。

div.style-container h1 {
    color: #f00;
    border-bottom: 1px solid #000;
}

Space 将读取 class .style-container 下的所有 h1 元素。即它将考虑 children 以及 children 到 children.

Answer 3

从我看到的地方你正在寻找 "scoped CSS"，它定义为 on MDN, but unfortunately for you is only available in Firefox

也就是说，基本的 CSS 解决方案无论如何都是更高效的。如果您需要添加一个脚本，这个脚本也会有一些重量（即使不是那么大）并且需要 CPU 时间，这在移动设备上也可能很重要。你会重新发明轮子，甚至不能让它成为一个完美的圆圈......

将 CSS 文件附加到元素和子元素

Appending CSS file to element and childs

html

css

jquery

children

dynamic-css