-3

我目前正在为一些 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 的差异。在我看来，这对于移动设备来说是相当大的数量......

4

3 回答 3

0

这是基本的 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。

于 2015-05-06T08:01:23.170 回答
0

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

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

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

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

Space将读取类下的所有 h1 元素。即.style-container，它将考虑子级以及子级到子级。

于 2015-05-06T08:03:10.840 回答
0

从我看到的地方，您正在寻找在 MDN上定义的“作用域 CSS” ，但不幸的是，您只能在 Firefox 中使用

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

于 2015-05-06T09:09:02.240 回答