css - 这个 CSS 是否被接受并且定义明确，或者是一个容易失败的 hack？

Question

隐藏了一个<br />标签与 CSS 一种明确定义的方式来使换行符以标签的 CSS 样式的定义为条件？它可以跨浏览器移植吗？当我想要它显示时，“内联”是最好的显示类型吗？

给定以下 CSS 和 HTML，

<style type="text/css">
  .maybe-hidden {display:inline}
</style>

abra<br class='maybe-hidden' />
ca<br class='maybe-hidden' />
dabra<br class='maybe-hidden' />

我希望看到:

abra
ca
dabra

将可能隐藏的更改为 maybe-hidden {display:hidden} , 我希望看到

abracadabra

编辑:

我很欣赏关于如何更好地做到这一点的答案。我可能没有说的是，这将在生成的 HTML 中，并且像某些人建议的那样更改实际元素的 CSS 类是不可行的。

但是更改样式的定义是可行的，就像更改 parent/enclosing/containing HTML 元素的类一样。

这就是为什么我需要知道这是否定义明确。虽然我将接受回答该问题的答案，但这绝不意味着我认为建议改变类(class)的答案是“错误的”；它们在我的情况下不可行。

Answer 1

就我个人而言，我认为最好创建两个 CSS 类(例如，“隐藏”和“显示”)，然后动态更改 DOM 元素的类。

如果您担心一次更改所有
标签，您可以使用基于其容器的选择器:

CSS:

.hidden maybe-hidden
{
    display: none;
}

.shown maybe-hidden
{
    display: inline;
}

HTML:

<div class="shown">
    abra<br class='maybe-hidden' />
    ca<br class='maybe-hidden' />
    dabra<br class='maybe-hidden' />
</div>

然后用JS改变div的class。