Question

我在类名称为“ displayIfYes _ %%”的元素上动态设置了类，其中%%来自数据库并且可以有很多值。

我试图为不想显示的类设置一个更简单的CSS选择器，但是我找不到如何做的选择。

我有一个可行的解决方案，仅使用此CSS的值为“ yes”时才显示元素：

.displayIfYes_yes {visibility: inherit !important;}
.displayIfYes_na, 
.displayIfYes_no,
.displayIfYes_scaled,
.displayIfYes_raw
/* ... and so on for any additionnal value */
{display: none !important;}

我希望选择器选择具有以“ displayIfYes”开头但不以“ yes”结尾的类的任何元素。

Answer 1

这是不使用:not()选择器的解决方案，而是仅依赖于属性和类选择器以及基础特性。

此外，您不能用display: none;覆盖visibility: inherit。请改用display: initial。

[class^="displayIfYes_"] {display: none;}
.displayIfYes_yes {display: initial;}

<div class="displayIfYes_yes">div.displayIfYes_yes</div>
<div class="displayIfYes_na">div.displayIfYes_na</div>
<div class="displayIfYes_no">div.displayIfYes_no</div>
<div class="displayIfYes_scaled">div.displayIfYes_scaled</div>
<div class="displayIfYes_raw">div.displayIfYes_raw</div>

Answer 2

您可以使用选择器[attribute|="value"]，在这种情况下，您的属性可以是 class 。

所以：

[class|="displayIfYes"]{
/* */
}

将选择以该属性开头的类属性。唯一的麻烦是class属性可以具有多个class，因此此解决方案可能并不总是有效。

在这种情况下，我建议对数据库中的不同方案使用不同的类。您可以为每种情况创建一个类，例如；

.na, 
.no,
.scaled,
.raw {
    /* other styles */
}
.displayIfYes {
    display: none !important;
}

Answer 3

解决此问题的传统方法是使用“基”类，然后使用更具体的类覆盖。在您的情况下，这将是：

.display-if-yes {
  display: none;
  /* Other styles which apply to all types */
}

.display-if-yes-yes {
  display: unset;
  visibility: inherit;
}

<div class="display-if-yes display-if-yes-yes">Yes</div>
<div class="display-if-yes display-if-yes-no">No</div>
<div class="display-if-yes display-if-yes-other">Other</div>

如果由于某种原因而无法更改类的结构，则可以满足您的特定要求：

.displayIfYes_yes {
  /* visibility: inherit; */
  color: red;
}

*[class^='displayIfYes_']:not(.displayIfYes_yes),
*[class*=' displayIfYes_']:not(.displayIfYes_yes) {
  /* display: none; */
  color: green;
}

<div class="displayIfYes_yes">displayIfYes_yes</div>
<div class="displayIfYes_no">displayIfYes_no</div>
<div class="displayIfYes_other">displayIfYes_other</div>

仅出于演示目的，我已注释掉您的特定样式。

类选择器的组合以开头，不以结尾

3 个答案: