CSS - 如何选择多个属性值？答案

【问题标题】：CSS - How to select multiple attribute values?CSS - 如何选择多个属性值？
【发布时间】：2016-12-14 18:33:40
【问题描述】：

如果我有多个属性包含不同编号值的 div 标签，并且我只想选择数字 1 到 10，那么在 css 中执行此操作的最有效方法是什么？

有没有类似的东西？ .div[line-number=1-10]?

【问题讨论】：

【解决方案1】：

这在标准 CSS 中是不可能的。使用 SASS 或 LESS 之类的 CSS 预处理器很方便，它允许您在许多其他功能中创建循环。 SASS 示例：

$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] {
}

【讨论】：

你可以使用.div[line-number^="*"]，但这会选择每个数字，10以上也是如此。
您在 css 解决方案中忘记了逗号和点。
幸运的是，我的项目一直以来都是基于 LESS 的，所以这对我有很大帮助，谢谢！

【解决方案2】：

如果您能够修改以 0 (01,02,03,04...10) 开头的行号属性，您可以这样做：

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

如果没有看到@jackBauer 的答案

【讨论】：

【解决方案3】：

您不能在 (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）。

【讨论】：