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 - 如何选择多个属性值？

回答

相关问题