Question

假设我们有：

<div id="view-item-hero-info">
    <h2>{{name}}</h2>
    <h4>{{location}}</h4>
    <h3>
        <span id="view-item-hero-header-score">
            You scored {{userScore}}pts
        </span>
    </h3>
    {{description}}
</div>

有没有办法可以直接在#view-item-hero-info内隐藏文字？我知道我可以使用text-indent，但还有另一种更好的吗？

注意：我不想隐藏元素，只隐藏其中的所有内容。

注2：隐藏#view-item-hero-info中的所有元素都没问题，我可以使用#view-item-hero-info > * { display: none }，但直接在#view-item-hero-info内的文字仍然可见。我需要#view-item-hero-info保持可见，以便可以看到其背景，但必须隐藏其中的文字。

Answer 1

您可以尝试：

#view-item-hero-info {
    color: transparent;
}

Answer 2

使用此CSS：

visibility: hidden;

隐藏你的元素，但保留了它通常需要的空间。而这个CSS会隐藏一个元素，好像它从未存在过：

display: none;

Answer 3

使用css display属性。在HTML中，这看起来像<span style="display: none">

使用javascript：document.getElementById("view-item-hero-header-score").style.display="none"

在css中：

#view-item-hero-header-score {
   display: none;
}

Answer 4

使用CSS可以设置样式：

visibility:hidden

所以隐藏元素中的所有后代（*）：

#view-item-hero-info * { visibility: hidden }

如果您只想隐藏直接后代，即儿童而不是孙子，那么您使用直接子选择器（＆gt;）

您可以选择特定的后代，例如div：

，而不是选择所有（*）

#view-item-hero-info div { visibility: hidden }

与您可以使用的可见性相同而不是：

display:none

显示选项不占用空间，而如果要保留显示元素的空间，则使用可见性选项

编辑：没有适用于文本节点的选择器（即没有元素的文本）。见Is there a CSS selector for text nodes?。所以你的跨度的所有孩子都需要在一个元素中才能应用样式。

作为一个黑客，你可以直接在你的主要内容和所有内容（包括独立文本）中放入另一个跨度。然后隐藏将起作用。

Answer 5

你能用JS来遍历元素DOM中的所有子项，然后用JS来覆盖CSS吗？类似的东西：

var items_i_want = document.getElementById("view-item-hero-header-score").elements

for(var i = 0; i < items_i_want .length; i++)
{
    items_i_want [i].style.display="none"
}

Answer 6

如果你需要隐藏文字

，你可以使用这段代码

.text-hidden{
   font-size: 0;
   text-indent: -9999px;
}

隐藏所有直接孩子的使用

.hidden-nested > *{
    visibility: hidden; /*or next line */
    display:none ;
}

如果您需要所有孩子使用最后一个代码但将课程更改为

 .hidden-nested  *

隐藏元素中的文本

6 个答案: