Css與正則表達式的編號

Question

我只想要第一個和第三個ID是紅色的。那可能嗎？

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

<div id="sections"> 
 
<div id="s10">one</div> 
 
<div id="s2">two</div> 
 
<div id="s30">three</div> 
 
<div id="t1">four</div> 
 
</div>

Answer 1

您可以使用特殊的CSS選擇器：id$='0'表示ID以0結尾，id^='s'表示ID以s開頭。

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

<div id="sections"> 
 
<div id="s10">one</div> 
 
<div id="s2">two</div> 
 
<div id="s30">three</div> 
 
<div id="t1">four</div> 
 
</div>

Answer 2

這不是什麼ID爲設計做的，CSS不支持正則表達式。但是，您的解決方案是使用類。

#sections .s-class { 
    color: red; 
} 
<div id="sections"> 
    <div id="s10" class='s-class'>one</div> 
    <div id="s2" class='s-class'>two</div> 
    <div id="s30" class='s-class'>three</div> 
    <div id="t1">four</div> 
</div> 

只有那些具有該特定類的人才會受到影響。

Answer 3

你可以使用一個事實，即那些元件具有使用開始屬性選擇器（[id^="s"]）與s開始，並且使用具有屬性選擇器的端部與0結束的ID（[id$="0"]） ：

#sections div[id^="s"][id$="0"] { 
 
    color: red; 
 
}

<div id="sections"> 
 
<div id="s10">one</div> 
 
<div id="s2">two</div> 
 
<div id="s30">three</div> 
 
<div id="t1">four</div> 
 
</div>

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Answer 4

或者你可以使用一個僞選擇：

#sections:nth-child(1), #sections:nth-child(3) { 
    color:red; 
} 

它不是在IE8或更低的支持，但應該罰款別處。