僅將樣式表應用於特定元素特徵

經過一番搜索後，我無法想出答案，所以這是我的問題。有沒有一種方法可以指定一個特定的元素特徵，比如一個id，整個樣式表應該被應用？僅將樣式表應用於特定元素特徵

例如，如果我有這樣

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="./style.css"> 
    </head> 
    <body> 
     <div id="my_id"> 
      <!-- A bunch of elements here --> 
     </div> 
    </body> 
</html>

HTML塊是否有指定包含在./style.css規則應當僅#my_id被施加到匹配元素與，類似於前指定#my_id的方式樣式表中的每個規則。

我明白在每個規則都達到這個之前指定了#my_id，但是我想知道是否有辦法做到這一點，而不需要在樣式表中添加膨脹。

我正在研究一個greasemonkey（userscript）腳本，它在創建它的特定頁面上創建一個「容器」元素，並放置所有其他所需的GUI元素。我不希望我的CSS干擾頁面上的CSS（比如意外地重寫了頁面上已存在的規則），但不希望將不必要的膨脹加入到我的樣式表中，因爲所有規則都可以避免是只有適用於'包裝'元素和/或它的孩子。

來源

2012-12-05 SReject

你的意思是，將樣式應用於#my_id中的元素？ – kennypu

我這樣做，而不是具體的規則。我想知道是否有辦法讓我的樣式表只將樣式應用於#my_id中的元素 – SReject

您可以使用>選擇器將樣式應用於#my_id中的元素。例如：

#my_id { 
    /* some style for #my_id */ 
} 

#my_id > p { 
    /* this will style all p tags within #my_id */ 
}

來源

2012-12-05 08:21:07 kennypu

正如問題中所述，我知道我可以將選擇符預先放置到規則的開頭。我在問是否有辦法做到這一點。 – SReject

你的問題不是很清楚。在任何情況下，如果您嘗試僅在#my_id中對項目進行樣式設置，那麼您需要預先設置#my_id，沒有其他方法。無論是，還是添加風格的內聯元素。 – kennypu

據我所知，這是不可能的。正如你所說的，你可以在規則前加上ID，但這不是你想要做的。

但是我應該說，你不應該爲單個ID指定一個樣式表，因爲一個ID在頁面上下文中應該是唯一的。此外，我發現將相同的ID應用到在不同頁面上用於不同目的的元素是不好的做法，因爲它可以使編寫常見的JavaScript頁面變得相當混亂。

來源

2012-12-05 08:21:21

我問的原因是因爲這是在第三方頁面上的Grease monkey腳本（腳本存儲和執行客戶端）。這些樣式不適用於同一個id的多個元素，而是存儲在具有特定id的元素中的元素。 – SReject

我陷入了困境。再次，我不幸地不相信這是可能的。 –

如果您正確使用ID，應該可以。您在_unique_元素上設置了一個ID，並將其中的所有內容都定位到其中。類是用於多個元素的。 – Kyle

這就是人們開始使用SASS的原因之一。

#my_id { 
    // all styles without editing 
    // Now all these styles are applied only if they fall 
    // under the element with id "my_id". 
}

編輯：在SASS剛剛築巢所有CSS類ID類中，像這樣，這將是容易其他（醜陋的）選擇是使用一個iframe，而不是一個div和加載子元素和樣式表，以便按如下方式對其進行沙盒處理。

<html> 
    <head></head> 
    <body> 
     <iframe id="my_id"> 
      <html> 
       <head> 
        <link rel="stylesheet" type="text/css" href="./style.css" /> 
       </head> 
       <body> 
        <!-- A bunch of elements here --> 
       </body> 
      </html> 
     </iframe> 
    </body> 
</html>

P.S：別忘了添加doctype。爲了簡單起見，我沒有在示例中添加它。

來源

2012-12-05 08:27:01

除瀏覽器可以使用之前，SASS/SCSS被編譯成CSS。在這一點上，我的問題再次變得有效...... – SReject

用替代方法更新了答案。 –

僅將樣式表應用於特定元素特徵

回答

相關問題