用CSS隐藏类第一个内容

n3schb8v  于 2023-05-02  发布在  其他
关注(0)|答案(4)|浏览(243)

我怎么能隐藏第一内容文本与css但保持第二内容文本?
示例:

<div class="class_1">
    FIRST TEXT               
    <div class="class_2">
        SECOND CONTENT
    </div>
</div>
zazmityj

zazmityj1#

使用visibility属性。然后,您可以折叠文本节点,同时保持元素节点可见:

.class_1 {
  visibility: collapse;
}

.class_2 {
  visibility: visible;
}
<div class="class_1">
  FIRST TEXT
  <div class="class_2">
    SECOND CONTENT
  </div>
</div>
wpcxdonn

wpcxdonn2#

如何只隐藏文本而不隐藏子元素?

如果确实无法将“FIRST TEXT”文本分隔为不同的元素,则应该隐藏文本本身而不是元素。
在这种情况下,您可以使用font-sizecolorline-heightvisibility等设置,所有这些设置都可以帮助显示文本**。当然,子元素的设置仍然必须覆盖父元素的设置

示例

.class_1 {
  color: transparent;
  line-height: 0;
}

.class_2 {
  color: black;
  line-height: auto;
}
<div class="class_1">
  FIRST TEXT               
  <div class="class_2">
    SECOND CONTENT
  </div>
</div>

在我的示例中,我删除了class_1中的字体颜色,这意味着我必须将class_2的字体颜色重置为黑色。这留下了一个空白的地方,“第一内容”曾经是。为了删除空白区域,我必须将line-height设置为0,但随后我需要在子元素中将line-height设置为“auto”(或其他适当的值)。如果不能以任何方式选择元素,那么您应该在父元素中将visibility属性设置为“hidden”,在每个子元素中设置为“visible”。

j5fpnvbx

j5fpnvbx3#

CSS不支持定位文本节点,只支持元素节点,所以不能直接定位FIRST TEXT。您可以隐藏class_1并显示class_2

.class_1 {
  visibility: hidden;
}
.class_2 {
  visibility: visible;
}
<div class="class_1">
        FIRST TEXT               
        <div class="class_2">
              SECOND CONTENT
        </div>
</div>

请注意,这对布局有影响,因为visibility只是隐藏内容,但不会删除它。您不能在.class_1上使用display: none,因为它和它的整个子树将消失,并且.class_2上的display: block将不会被考虑。
为了能够单独针对.class_2,将其 Package 到元素中:

.class_1 > *:first-child {
  display: none;
}
<div class="class_1">
        <span>FIRST TEXT</span>
        <div class="class_2">
              SECOND CONTENT
        </div>
</div>

span也可以在这个简单的例子中工作,而不是.class_1 > *:first-child;很难说在非简化的例子中什么是最好的。

idfiyjo8

idfiyjo84#

我的解决方案是设置font-size s,如下所示:

.class_1 {
  font-size: 0;
}

.class_2 {
  font-size: 16px;
}
<div class="class_1">
  FIRST TEXT
  <div class="class_2">
    SECOND CONTENT
  </div>
</div>

相关问题