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具有跨度作为类，则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。

是否可以从CSS中的attr（）获取正则表达式？

3 个答案: