在css中使用正則表達式？

Question

我有一個包含了ID（S）的形式S1的，S2等的div的HTML頁面。

<div id="sections"> 
    <div id="s1">...</div> 
    <div id="s2">...</div> 
    ... 
</div> 

我想將css屬性應用於這些部分/ div的子集（取決於id）。但是，每次添加div時，我都必須像這樣分開添加該部分的css。

//css 
#s1{ 
... 
} 

有什麼樣的CSS正則表達式，我可以使用應用樣式的一組的div。

Answer 1

您可以管理選擇那些沒有任何形式的正則表達式的元素，而是直接回答這個問題，是的，你可以在選擇器中使用一種正則表達式：

#sections div[id^='s'] { 
    color: red; 
} 

這就是說，選擇任何div元素＃sections div中有一個ID開頭字母's'。

請參閱fiddle here。

W3 CSS selector docs here。

Answer 2

首先，在HTML文檔中有許多匹配項目的方法。應該謹慎使用ID匹配。

首先從此引用開始，查看可用於將樣式規則應用於元素的一些可用選擇器/模式。

http://www.w3.org/TR/selectors/

大多數選擇將與IE 9和所有其他現代瀏覽器中運行;重要的選擇器在IE 8中工作（結果將改變IE 7和更低版本）。其次，除非您確實需要通過ID明確指定項目，否則請考慮使用分層選擇器。這使代碼更清潔。

匹配#sections的直系後裔的所有DIV。

#sections > DIV 

匹配所有DIV，這種是#sections直接或間接後裔。

#sections DIV 

比賽第一DIV這是#sections的直系後裔。

#sections > DIV:first-child 

將DIV與特定屬性匹配。

#sections > DIV[foo="bar"] 

Answer 3

可以」只需添加一個類到每個資料覈實和規則應用到類以這樣的方式

HTML：

<div class="myclass" id="s1">...</div> 
<div class="myclass" id="s2">...</div> 

CSS：

//css 
.myclass 
{ 
    ... 
} 

Answer 4

ID是爲了識別唯一的元素。應用於它的任何樣式對於該元素也應該是唯一的。如果您想要將樣式應用於許多元素，則應該爲它們全部添加一個類，而不是依靠ID選擇器...

<div id="sections"> 
    <div id="s1" class="sec">...</div> 
    <div id="s2" class="sec">...</div> 
    ... 
</div> 

和

.sec { 
    ... 
} 

或者在特定情況下，你可以選擇你的父容器內的所有部門，如果沒有其他的裏面，像這樣：

#sections > div { 
    ... 
} 

Answer 5

還有另一種簡單的方法來選擇CSS太特別的元素...

#s1, #s2, #s3 { 
    // set css attributes here 
} 

如果你只有少數幾個元素可供選擇，並且不想要帶班打擾，這會很容易地工作太。