Question

特定的Web编辑器仅允许使用内嵌CSS，而不能使用JavaScript。

我想做一个最小的显示/隐藏部分：

<div>
    <p id="question"><a href="#answer">What do you call a fish with no eyes</a></p>
    <p id="answer" style="visibility:hidden">Fsssssssh</p>
</div>

有什么解决办法吗？ -我兼容。

Answer 1

简而言之，否。

虽然完全有可能在没有任何JavaScript的情况下实现这样的系统（针对多个问题和答案），但不可能纯粹以内联方式进行。这是因为您无法内联定位伪元素。

即使使用当前的HTML结构，也将仍然是不可能的，因为CSS中没有子选择器（尽管 :has() 伪选择器具有起草）。

除此之外，还值得注意的是，内联CSS的 level of specificity 比样式表更高；除非您使用!important声明，否则样式表规则不能覆盖内联CSS。

假设您要更改HTML，可以使用 :focus 伪选择器， adjacent sibling combinator (+) 和!important声明，如下所示：

#question:focus + #answer {
  visibility: visible !important;
}

<div>
  <a id="question" href="#">What do you call a fish with no eyes</a>
  <p id="answer" style="visibility:hidden">Fsssssssh</p>
</div>

仅使用嵌入式CSS隐藏/显示CSS

1 个答案: