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

Question

>我在类名为"displayIfYes_%%"的元素上动态设置类，其中%%来自数据库，可以有很多值。

我

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

我有一个有效的解决方案，仅当值为"是"时才使用此CSS显示元素：

.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()选择器的解决方案，而只依赖于属性和类选择器以及底层特性。

此外，您不能用 visibility: inherit 覆盖display: none;。请改用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|="displayIfYes"]{
/* */
}

将选择以此开头的类属性。唯一的复杂之处在于类属性可以有多个类，因此此解决方案可能并不总是有效。

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

.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>

我注释掉了您的特定样式只是为了演示。