css仅使用内联css隐藏/显示怎么办?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (159)

特定的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>
提问于
用户回答回答于

这是不可以的。

虽然完全有可能在没有任何JavaScript的情况下实现这样一个系统(针对多个问题和答案),但是不可能纯粹内联。 这是因为你无法内联伪元素。

即使你使用当前的HTML结构,这仍然是不可能的,因为CSS中没有子选择器(尽管a:has()伪选择器已被起草)。

除此之外,还值得注意的是,内联CSS具有比样式表更高的特异性; 样式表规则不能覆盖内联CSS,除非你使用!important声明。

假设你正在更改HTML,可以通过以下组合实现:focus伪选择器,相邻兄弟组合器(+)和!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>

扫码关注云+社区

领取腾讯云代金券