是否可以在 CSS 中从 attr() 获取正则表达式

Question

我正在尝试制作自己的CSS网格框架以更好地理解它。我想做的是指定某物跨越多少行列。为此，我想使用一些正则表达式。

目前

，我目前有这个 HTML：

<div class="wrapper">
  <div class="item-1 span1">Item 1</div>
  <div class="item-2">Item 2</div>
  <div class="item-3">Item 3</div>
  <div class="item-4">Item 4</div>
  <div class="item-5">Item 5</div>
  <div class="item-6">Item 6</div>
  <div class="item-7">Item 7</div>
  <div class="item-8">Item 8</div>
  <div class="item-9">Item 9</div>
  <div class="item-10">Item 10</div>
  <div class="item-11">Item 11</div>
  <div class="item-12">Item 12</div>
  <div class="item-13">Item 13</div>
  <div class="item-14">Item 14</div>
  <div class="item-15">Item 15</div>
  <div class="item-16">Item 16</div>
</div>

使用此 CSS：

@import "reset.css";
:root{
  width: 100vw;
  height: 100vh;
  --box-color: #eee;}
body{
  min-width: 100%;
  min-height: 100%;}
.wrapper{
  position: absolute;
  width: 100%;
  height: 100%;
}
* [class*=span]{
  background: var(--box-color);
}
* [class*=span]::before{
  content: attr(class);
}

目前，CSS 仅将背景设置为灰色，如果它作为一个类具有跨度。然后我想grid-row: <span-(number)>.

是否可以使用纯CSS来做到这一点，或者我也必须使用JavaScript？
如果我只能使用 CSS，我该怎么做？

Answer 1

我认为不可能用纯CSS获得HTML元素的类。要使用 JavaScript 做到这一点，只需执行以下操作：

console.log(document.getElementById("element").getAttribute("class"));

<p class="test" id="element">value</p>

或者在我看来，你可以使用jQuery的一个更简单的方法：

console.log($("#element").attr("class"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="test" id="element">value</p>

Answer 2

这在

CSS 中是不可能的;正如 LGSon 所说，attr() 会将整个属性值作为单个字符串提供，您将无法使用它执行任何字符串操作。

您可以获得的最接近的是将数字放在其自己的自定义数据属性中，但这当然意味着在每个项目上增加一个属性来膨胀您的标记，所有这些都是为了使网格系统正常工作。

Answer 3

CSS 用于设置 html 标签的样式。在CSS中不可能做任何数学任务。对于任何增量或减少或任何计算，您需要使用 javascript。