想要对表中的所有 TD id 使用带有变量的 css 选择器答案

【问题标题】：Want to use css selectors with variables for all TD ids within a table想要对表中的所有 TD id 使用带有变量的 css 选择器
【发布时间】：2017-02-07 00:12:36
【问题描述】：

我想为表中行的所有 td id 设置 CSS 属性。而不是这样做：

.idName1, idName2, idName3, idName4, idName5 {background-color: ##4CAF50;}

我想这样做：

.idName#{$x} {background-color: ##4CAF50;} 
...where $X is a php variable indicating row number.

对这样的变量使用 CSS 选择器是否有效？

谢谢。

【问题讨论】：

标签： php css

【解决方案1】：

这在 css 中是无效的，但你可以做一件事，你可以使用 css 从属性选择器开始

[id^='idName'] {
  color: red
}

<div id="idName1">one</div>
<div id="idName2">two</div>
<div id="did">did</div>
<div id="idName3">three</div>

阅读更多关于它和其他类似选择器的信息https://developer.mozilla.org/en/docs/Web/CSS/Attribute_selectors

【讨论】：

【解决方案2】：

考虑基于 CSS 属性的选择器

CSS 支持a variety of attribute-based selectors，包括一个“开头为”选择器，您可以使用它来匹配任何以“idName”开头的类，如下所示：

/* This will match any classes that start with "idName" */
[class^="idName"] {
    background-color: #4CAF50;
}

同样，如果您想明确定位 id 属性，您也可以这样做：

[id^='idName'] {
    background-color: #4CAF50;
}

考虑查看上面链接中详述的各种受支持的选择器，以确定最适合您需求的选择器。

示例

[class^="idName"] {
  background: yellow;
}

<div class="idName1">1</div>
<div class="idName2">2</div>
<div class="idName3">3</div>
<div class="x">X</div>
<div class="idName4">4</div>
<div class="x">X</div>
<div class="idName5">5</div>
<div class="x">X</div>
<div class="idName6">6</div>
<div class="x">X</div>

【讨论】：