Question

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

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

CSS可能吗？

Answer 1

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

与CSS本身最接近的是：

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

使用JS或将元素添加到类的服务器端代码更好地处理这种情况。

Answer 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;
}

向CSS添加逻辑

2 个答案: