如何使用HTML属性在CSS中创建条件？

Question

我正在尝试在CSS中创建一个条件。为此，我必须访问HTML属性，并根据其值显示True或False，但我不知道如何操作。

<div class="block">
      <div class="question">
      Question
      </div>
      <div class="answer" data-value="true">
      </div>
</div>

当我写

时，CSS文件正常工作

.answer:after {
content: "OK";
}

但是当我尝试使用CSS选择器访问属性“data-value”时，指定的内容未显示：

.answer:after[data-value="true"] {
content: "True";
}

.answer:after[data-value="false"] {
content: "False"; 
}

Answer 1

您需要在[data-value="true"]之前加:after。您现在的方式是在:after而不是.answer

上查找该属性

.answer[data-value="true"]:after {
  content:"True";
}
.answer[data-value="false"]:after {
  content:"False";
}

Answer 2

以下是使用Data-Attribute应用CSS的解决方案。

＆＃13;

＆＃13;

.answer:after {
content: "OK";
}

.answer[data-value="true"]:after {
content: "True";
}

.answer[data-value="false"]:after {
content: "False"; 
}

＆＃13;

<div class="block">
      <div class="question">
      Question
      </div>
      <div class="answer" data-value="true">
      </div>
</div>

＆＃13;

＆＃13;

＆＃13;