Html 如何访问括号内的css选择器结果？

假设您有10个ID为1到9的HTML元素；元素1有

id=“1”

，等等。这就是我想要做的。“（IdNumber）”不在语法中，仅用于说明：

// for all elements
 #(IdNumber) {width: (IdNumber)%;} 

因此，最终结果应该使每个元素的宽度等于其id；第一个元素的宽度为1%，以此类推。我想使用未指定的CSS选择器的结果，如这里的id字符串，在括号内作为值。

（使用较少）您可以通过以下方法实现这一点： 例如HTML：

---

您可以在css上使用属性选择器，但应分别为每个id编写样式，例如：

Html:

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>

Css:

div{
背景色：蓝紫色；
利润率：10px；
边框：1px纯色灰色；
高度：30px
}
[id=“1”]{
宽度：1%；
}
[id=“2”]{
宽度：2%；
}
[id=“3”]{
宽度：3%；
}
[id=“4”]{
宽度：4%；
}

---

我希望它有用。

它应该是这样的：

@for $w from 1 through 9 {
  ##{$w} {
    width: unquote('#{$w}%');
  } 
}

---

但我强烈建议您也在id前面加上一些字符，因为虽然纯数字id是，但html4却不是这样，这通常会导致问题，因为纯数字id无法与数字区分。

我假设元素和id是以某种方式生成的（js或服务器代码）？这一代是否可以包含一个内联样式，重用Id和宽度的变量？我现在知道如何分别进行。但我想一起做。

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>

<style>
    div {
        background-color: blueviolet;
        margin: 10px;
        border: 1px solid gray;
        height: 30px
    }
     [id="1"] {
         width: 1%;

     }
    [id="2"] {
        width: 2%;
    }
    [id="3"] {
        width: 3%;
    }
    [id="4"] {
        width: 4%;
    }
</style>

@for $w from 1 through 9 {
  ##{$w} {
    width: unquote('#{$w}%');
  } 
}