如何從CSS中選擇某些屬性？

我有三個有很多類的大CSS文件。相同的這些類具有相同的名稱，但在不同的文件中。如何從CSS中選擇某些屬性？

舉例： CSS1：

... 
.btn-primary { 
    background: #000; 
} 
    ...

CSS2：

... 
.btn-primary { 
    background: #fff; 
} 
    ...

和CSS3：

... 
.btn-primary { 
    background: #4285F4; 
} 
    ...

讓我們假設所有三個CSS被稱爲在我的HTML頁面。有沒有一種方法可以在我的網頁中僅選擇CSS3中的.btn-primary類？如果是的話，我該怎麼做？

來源

2016-12-15 magn

剛剛過去的風格：「我有三個大有許多類的CSS文件。「 - HTML有類。 CSS不。 CSS有類選擇器......和規則......和規則集......以及其他類型的選擇器......人們已經知道（錯誤而且非常容易混淆的）所有東西都稱爲「類」。 – Quentin

「選擇」是什麼意思？ – fstanis

號

如果樣式表被加載到頁，它與選擇器，一個元件相匹配的規則集，那麼它將適用於該元件。

爲特定財產提供衝突信息的規則將互相覆蓋standard cascade order。

來源

2016-12-15 15:03:36 Quentin

不是原樣，但你可以改變你的樣式表，以便它的內容是這樣的：

.btn-primary, .btn-primary.style1 { ... } 


.btn-primary, .btn-primary.style2 { ... } 


.btn-primary, .btn-primary.style3 { ... }

然後，你可以通過下面的類得到具體的樣式：

<a class='btn-primary style2'>Stylesheet 2</a>

在總之，您需要添加一些縮小不同風格的附加方法。

另一種可能性是轉換你的CSS文件SCSS像這樣：

.style1 { 
    .btn-primary { ... } 
}

然後，您可以使用來自特定表的樣式，像這樣：

<div class='style1'> 
    <a class='btn-primary'>Stylesheet 1</a> 
</div>

來源

2016-12-15 15:09:08

如果我想一起使用多個大型庫，我總是有運氣'namespacing'我的樣式表。 –

抱歉：在我看來，以下是一個錯誤的解決方案。我想添加它，因爲我可以想到的情況下，你必須找到這種hacky的方式，而不是改變CSS文件。

一般來說，正如Quentin和Bryant所指出的那樣 - 對於css文件沒有「命名空間」，所以如果你加載了所有的css文件，你最終會得到最後一個覆蓋文件的選擇器類（名稱衝突的）並且無法在它們之間進行選擇。

如果（對於一些奇怪的原因），你不關心Chrome用戶 - 你大概可以使用document.styleSheets[i]對象的cssRules或rules性 - 每個加載樣式表文件（i是該文件的數量）。如上所述，這種方法does not work for Chrome。由於某種原因，對於styleSheets[i]中的每一個，Chrome瀏覽器中的cssRules和rules均爲空。

我哈克解決方案：

加載你需要的所有CSS文件，
JavaScript代碼後，讀你選擇爲文本文件，CSS文件。您可以使用AJAX - 請參閱this question and its answers
在您獲得的文本中搜索您想要的選擇器並提取該字符串。例如，你可以解析整個文件並採取相關部分。

在搜索如何幫助完成此步驟時，我遇到了document.styleSheets[i].cssRules對象以及在Chrome中無法使用的方法。
圍繞它構建一個樣式元素並將該樣式元素追加到head元素（here's an answer that shows how to create and append style elements to the head element）。

這似乎是一個錯誤的方式從幾個原因（性能，高雅，可讀性）做到這一點 - 也許意味着css文件的設計不適合你的項目（看科比的建議） - 但我想要這個答案在這裏，因爲是一種方法來做到這一點，雖然是一個黑客，如果由於某種原因，你不能改變的CSS文件，必須按原樣使用它們 - 然後在這裏你去。

來源

2016-12-15 17:11:04

我不知道這是什麼用法，我的意思是有三個文件，並存儲不同的風格，甚至相同的風格。

但也有一些工具，將正常化，然後再縮小你的CSS，例如，看看Nano CSS

但是，正如其他的答案說，這是不可能說什麼類從哪個文件適用於本頁面，它們將覆蓋，最後一個樣式將應用於該元素。

這裏也是找出如何重寫工作的例子：

#test-link { 
 
    display: block; 
 
    text-decoration: none; 
 
    background: red; 
 
    color: white; 
 
} 
 
#test-link { 
 
    background: green; 
 
} 
 
#test-link { 
 
    background: orange; 
 
} 
 
#test-link { 
 
    background: black; 
 
}

<a id="test-link" href="javascript:void(0);">Test link</a>

正如你看到的，申請了background顏色

來源

2016-12-19 09:09:02 M98

如何從CSS中選擇某些屬性？

回答

相關問題