將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文件附加到元素和子元素

回答

相關問題