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

-3

我目前正在为一些CSS样式创建一个库（还有一些是由jQuery定义的，所以随意使用JavaScript/jQuery作为解决方案 - 我不认为这是可能的以任何方式使用普通的CSS）。将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。在我看来，这对于移动设备来说是相当大的数量......

来源

2015-05-06 Jannis Jorre

我认为css是足够快，如果你指定选择器correclty。阅读这里：https：//developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS – rst

是的，CSS是足够快。但我更担心传输的数据量，尤其是因为移动设备。我希望它尽可能适合移动设备。 –

从我看到它，你要寻找的“作用域CSS”，其定义on MDN，可惜你是only available in Firefox

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

来源

2015-05-06 09:09:02

哦，对了，我没有想到脚本的CPU使用率......是的，这可能需要大约相同的时间。传输的数据似乎不太大，所以应该没问题。 –

我不知道你是否在关心时间或文件大小。当然，如果你在下载时间，脚本解决方案可能不是一个解决方案：它需要一个额外的请求下载（这不仅是大小，有一些不可压缩的步骤），并在运行时更多的资源（尤其是当你的CSS选择器非常简单，解析起来非常简单），所以我认为你应该选择CSS解决方案，据我所知，这个解决方案只能用于这个目的。 –

已经有一个脚本被传递，所以没有额外的请求。但是，现在我也这么认为... –

这是基本的CSS。

样式一个H1其为元素的子（第一级子）（例如使用DIV但DIV可以与.style容器或任何类别/ ID代替）：

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

你可以也简单地使用：

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

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

来源

2015-05-06 08:01:23

我问过这个问题，因为我想避免这个问题（我正在使用第二个选项）。我必须将其应用于所有选择器，这会导致文件增长很多，这又会导致更多的数据被传输。 –

然后，您可以通过查看可以利用嵌套样式的SASS来获益。 –

@Callum> SASS无论如何都需要在服务器端或客户端进行解析，以便浏览器呈现，这样就不会解决OP文件权重问题。 Sass正在促进开发，而不是以任何方式改进性能。 –

在你的情况，而不是每次使用脚本加载样式元素的样式，更好地使用CSS。因为当它看到DOM中的选择器时，css选择器将立即加载。的CSS：

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

>表示立即H1类.style-container .IE后独生子女吧，不是所有的孩子的孩子。

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

Space将读取类.style-container下的所有H1元素.IE会考虑孩子的孩子的孩子一起。

来源

2015-05-06 08:03:10 Jayababu

我问了这个问题，因为我想避免这个（我目前正在使用第二个选项）。我必须将其应用于所有选择器，这会导致文件增长很多，这又会导致更多的数据被传输。 –

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

回答

相关问题