Question

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

是否有类似于.div[line-number=1-10]？

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

Answer 2

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

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

如果没有看到@jackBauer的答案

Answer 3

您无法在范围（1-10）中指定行号。

这在属性选择器中不可用 - https://www.w3.org/TR/css3-selectors/#attribute-selectors。

但是，您也可以使用下面的内容

对每个属性值应用css

＆＃13;

<p>Use attribute selectors</p>

<div line-number="1">one</div>
<div line-number="2">two</div>
<div line-number="10">ten</div>

＆＃13;

* {
  padding: 0;
  margin: 0;
}
body {
  background-image: url("images/indexBg.jpg");
  background-attachment: fixed;
}
#container {
  padding: 50px;
  margin: 50px;
  background-color: #cccfe8;
  opacity: 0.9;
}
#login {
  width: 20%;
  height: 15%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  padding: 10px;
  background-color: #cccfe8;
  opacity: 0.9;
}
#login label {
  text-align: right;
  padding-right: 20px;
  display: inline-block;
  min-width: 100px;
}
#loginButton {
  display: block;
  margin: auto;
}
.inp {
  display: inline-block;
  padding: 5px;
}
#login>p {
  margin: 0px auto;
  margin-top: 10px;
}

＆＃13;

希望这会在某种程度上有所帮助（y）。

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

3 个答案: