CSS - 如何選擇多個屬性值？

如果我有多個包含不同編號值的屬性的div標籤，我想只選擇1到10號，那麼在css中這樣做的最有效方法是什麼？CSS - 如何選擇多個屬性值？

是否有像例如.div[line-number=1-10]？

2016-12-14 Audun Olsen

這在標準的CSS中是不可能的。使用像SASS或LESS這樣的CSS預處理器很方便，它允許您在許多其他功能中創建循環。與上海社會科學院的一個例子：

$selector: '.div'; 
@for $i from 1 to 10 { 
    $selector: $selector + '[line-number=' + $i + ']'; 
} 

#{$selector} { 
    // style 
}

在純CSS你註定要使用此解決方案來代替：

.div[line-number=1], .div[line-number=2], .div[line-number=3], .div[line-number=4], .div[line-number=5], .div[line-number=6], .div[line-number=7], .div[line-number=8], .div[line-number=9], .div[line-number=10] { 
}

來源

2016-12-14 08:37:39 MakG

你可以使用'.div [line-number^=「*」]'，但是它會選擇每個數字，也就是10以上。 – Kyle

您忘記了CSS解決方案中的逗號和點。 –

你是對的，修好了。 – MakG

不能指定範圍（1-10）行號。

這在屬性選擇器 - https://www.w3.org/TR/css3-selectors/#attribute-selectors中不可用。

另外，也可上的東西每個屬性值應用CSS像下面

div[line-number="1"] { 
 
    color: red; 
 
} 
 

 
div[line-number="10"] { 
 
    color: green; 
 
}

<p>Use attribute selectors</p> 
 

 
<div line-number="1">one</div> 
 
<div line-number="2">two</div> 
 
<div line-number="10">ten</div>

希望這會以某種方式（y）的幫助。

來源

2016-12-14 08:52:03 pradeep1991singh

，如果你有修改行號屬性從0開始（01,02,03,04 ... 10），你可以做到這一點的能力：

div[line-number^="0"], div[line-number="10"] { 
    // css properties 
}

如果看不到答案@jackBauer

來源

2016-12-14 08:53:34

CSS - 如何選擇多個屬性值？

回答

相關問題