新的「scoped CSS」有什麼用？

我在上發現了這個問題，我想知道它解決了哪些問題，而這些問題無法用CSS中的當前操作完成。例如，新的「scoped CSS」有什麼用？

<div> 
    <style scoped> 
    h1 { color: FireBrick; } 
    p { color: SaddleBrown; } 
    </style> 
    <h1>This is an H1 in a scoped div. 
     Regardless of global styles the text should be "FireBrick". 
    </h1> 
    <p>This is a paragraph in a scoped div. The text should be "SaddleBrown".</p> 
</div> 

<p>This is another paragraph, 
    that will unaffected by the scoped style and remain black.</p>

很容易做到的

<style> 
    div.scoped h1 { color: FireBrick; } 
    div.scoped p { color: SaddleBrown; } 
</style> 

<div class="scoped"> 
    <h1>This is an H1 without scoped div. 
     Regardless of global styles the text should be "FireBrick". 
    </h1> 
    <p>This is a paragraph without scoped div. 
    The text should be "SaddleBrown".</p> 
</div> 

<p>This is another paragraph, 
    that will unaffected by the scoped style and remain black.</p>

還是我缺少什麼？

編輯
是不是該重新引入內嵌樣式，最不利的造型的三種方式？

來源

2014-01-22 stevenvh

SO用於解決問題。這個問題似乎更多的是「這個解決方案是否存在問題？」，因此是廣泛的，理論性的，部分是推測性的。 –

@Jukka - 嗯，我的問題描述了我的問題，這是我不知道它的好處。** SO是爲了獲得問題的答案，對嗎？** :-) – stevenvh

當你考慮一個巨大的框架時，問題可能會變得更加清晰，它由許多獨立的模塊組成，每個模塊都引入了一些html代碼片段，最後彙編成最終的HTML代碼。

開發一個模塊時，你不可能知道另一個開發者是否有相同的想法，並且使用類似scoped的類來限制它們的CSS樣式的範圍。突然你的模塊覆蓋了完全不同模塊的樣式。

使用scoped屬性，您可以確定樣式僅限於您實際想要定位的那部分dom。

壞：

<head> 
    <style> 
    div.scoped p { color: SaddleBrown; } 
    </style> 
</head> 
<body> 
    <div class="scoped module-1"> 
    <p>will be affected</p> 
    </div> 
    <!-- ... more markup --> 
    <div class="module-2 scoped"> 
    <p>will also be affected</p> 
    </div>

好：

<head> 
    <style> 
    div p { color: SaddleBrown; } 
    </style> 
</head> 
<body> 
    <div class="module-1"> 
    <p>will be SaddleBrown</p> 
    </div> 
    <!-- ... more markup --> 
    <div class="module-2"> 
    <style scoped> 
     /* appears later in the markup, so will override per law of cascading */ 
     div p { color: #bada55; } 
    </style> 
    <p>will be #bada55 !</p> 
    </div>

不，這些都不是內聯樣式，因爲它是：1）仍然是一個單獨的樣式塊2）遵守相同的規則來講precedence與其他樣式聲明一樣，因此您仍然可以在沒有太多麻煩的情況下從外部覆蓋它們。

來源

2014-01-22 12:11:59 Christoph

寫爲HERE如果您需要在HTML中包含來自外部源的一些代碼，並且您不希望冒用您帶入的CSS指令影響您當前的佈局，那麼新的作用域css指令很有用。

I.E.如果複製HTML塊與包含與你同名的一類列入<head>一個<style>標記，該類會通過你已經包括了外部代碼覆蓋/注入

用他們的話說：

「一個常見的用例是聯合內容：當你作爲一個網絡筆者想從第三方，包括其所有風格結合的內容，但不想冒險的風格‘污染’其他無關這裏的一個很大的優勢是可以將來自其他網站的內容（如yelp，twitter，ebay等）組合成一個頁面，而無需使用或即時編輯外部文件內容「。

來源

2014-01-22 12:13:46 VAShhh

新的「scoped CSS」有什麼用？

回答

相關問題