代码之家 › 专栏 › 技术社区 › tpdi

这个CSS被接受并定义得很好,还是一个容易失败的黑客?

css

tpdi · 技术社区 · 15 年前

隐藏着 <br /> 用CSS标记一种定义良好的方法,使换行符以标记的CSS样式的定义为条件?它是可跨浏览器移植的吗?当我想显示它时,“inline”是最好的显示类型吗?

给定下面的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类是不可行的。

但是改变样式的定义是可行的,就像改变 父级/封闭/包含 HTML元素。

这就是为什么我需要知道这个定义是否明确。虽然我要接受一个回答这个问题的答案,但这绝不意味着我认为建议改变课堂的答案是“错误的”;在我的情况下,这些答案是不可行的。

4 回复 | 直到 15 年前

Dan Lew 15 年前

我个人认为最好创建两个CSS类(例如“hidden”和“shown”),然后动态地更改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 .

Kamiel Wanrooij 15 年前

我不会使用这种有条件地插入换行符的方法。如果有可能是单行或多行,不要使用用于换行和防止换行的HTML元素,而是使用预期的CSS。这可能是:

<span class="first">abra</span>
<span class="second">ca</span>
<span class="third">dabra</span>

也让他们 display:inline; 或 display:block; .

您也可以使用float,但这会导致诸如float clearing之类的副作用,这对您的特定情况没有任何影响。最好使用正确的(语义)HTML标记、正确的类名和CSS来获得所需的标记。

还可以看到: http://tantek.com/log/2002/12.html 关于这个问题的一些想法。

Grant Wagner 15 年前

它应该可以跨浏览器正常工作。不过,我不会为该类设置任何默认显示:

.maybe-hidden-show { /* display:default; */ }
.maybe-hidden-hide { display: none; }

我包括明显无效的 display:default 在评论中 -show 类来表示类的意图(使用元素的默认值 display )

然后您可以使用jquery或纯javascript交换元素上的类。

Peter Mortensen John Conde 14 年前

您可以简单地完全删除“display:inline”。括号之间没有任何内容将使类“未定义”,并赋予<br>标记通常的含义。