Question

我目前正在为一些CSS样式创建一个库（有一些也是由jQuery定义的，所以可以随意使用JavaScript / jQuery来解决 - 我不认为它可能与正常的CSS无论如何）。

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

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

这需要传输更多的数据，所以我想也许有可能将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来加载文件，只包含该类及其所有元素的所有元素。

注意：

可能会出现通过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或任何类/ ID）：

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

你也可以简单地使用：

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

后者将适用于div中的所有h1。

Answer 2

在您的情况下，而不是使用脚本每次加载样式来设置元素样式，最好只使用CSS。因为在看到DOM中的选择器时，css选择器会立即加载。的CSS：

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

>在课程.style-container之后立即表示h1。即只有孩子，而不是所有孩子到孩子。

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

Space将读取班级.style-container下的所有h1元素。即，它会将儿童以及儿童视为儿童。

Answer 3

从我看到的地方，您正在寻找＆＃34;范围内的CSS＆＃34;，其定义为on MDN，但不幸的是，only available in Firefox

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

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

3 个答案: