向 CSS 添加逻辑答案

【问题标题】：Add logic to CSS向 CSS 添加逻辑
【发布时间】：2020-04-26 07:01:58
【问题描述】：

我想在我的 CSS 中使用逻辑。仅当产品 ID 大于特定数字时才需要应用样式，例如：

if (data-product-id > 25) {
  padding: 50px;
}

这可以通过 CSS 实现吗？

【问题讨论】：

你一般想用JavaScript把某个类应用到你需要不同显示的项目上
相关：stackoverflow.com/q/60819432/8620333
通常，我们要求提供最少的可行代码来创建解决方案。使用 SASS/LESS 你可以做到，但是使用 JS/jQuery 会更容易很多。

标签： css

【解决方案1】：

不，不是。属性选择器基于简单的字符串匹配。没有规定小于/大于数值比较。

CSS 本身最接近的应该是这样的：

[data-product-id="25"],
[data-product-id="26"],
[data-product-id="27"],
/* etc */

这类事情最好用 JS 或向元素添加类的服务器端代码来处理。

【讨论】：

【解决方案2】：

你可以应用一些你在 CSS 中询问的有限逻辑，但我建议不要这样做。尽管如此，下面的答案是一个答案，最好用Javascript实现你的逻辑。

假设您的所有数据产品都有一个名为 data-product 的类，您可以创建此规则：

.data-product {
    padding: 50px;
}

.data-product[data-product-id="1"],
.data-product[data-product-id="2"],
.data-product[data-product-id="3"],
.data-product[data-product-id="4"],
.data-product[data-product-id="5"],
.data-product[data-product-id="6"],
.data-product[data-product-id="7"],
.data-product[data-product-id="8"],
.data-product[data-product-id="9"],
.data-product[data-product-id="10"],
.data-product[data-product-id="11"],
.data-product[data-product-id="12"],
.data-product[data-product-id="13"],
.data-product[data-product-id="14"],
.data-product[data-product-id="15"],
.data-product[data-product-id="16"],
.data-product[data-product-id="17"],
.data-product[data-product-id="18"],
.data-product[data-product-id="19"],
.data-product[data-product-id="20"],
.data-product[data-product-id="21"],
.data-product[data-product-id="22"],
.data-product[data-product-id="23"],
.data-product[data-product-id="24"],
.data-product[data-product-id="25"] {
    padding: 25px;
}

【讨论】：