如何使用纯 CSS 选择器选择隐藏元素答案

【问题标题】：How to use pure css selector to select hidden element如何使用纯 CSS 选择器选择隐藏元素
【发布时间】：2022-05-07 16:39:32
【问题描述】：

<td class="col" style="display:none">AAA
      <span prop="1" class=" clear-icon " style=""></span>
</td>

我想使用纯 css 隐藏文本“AAA”以显示跨度 btn。有没有办法在纯 css 中做到这一点？

【问题讨论】：

请详细说明style="display:none"，这是您的原始 HTML 代码还是您试图解决问题的尝试？
如果我错了，请纠正我，但听起来您希望 "AAA" 被隐藏但 <span> 显示。这个对吗？如果是这样，我不相信这是可能的。据我所知，如果包含/父元素被隐藏，则嵌套/子元素不可见。您也可以尝试将 "AAA" 放在一个跨度中。然后你可以只隐藏一个 <span> 包含 "AAA"...
所以我在后端有 html 字符串生成器，它决定 td 元素是否应该隐藏。我想用纯css来选择隐藏元素
@War10ck 是的，这正是我想要的。这是一些遗留代码，所以我不想更改 html 很多。用 span 换行需要 DOM 更改。这就是为什么我不想这样做
@Zen 还是一头雾水，你要说的隐藏元素是什么意思？ td 或文本节点 AAA?

标签： css css-selectors

【解决方案1】：

如果您的设计没有真正响应，我的意思是您只需为内部span 设置固定字体大小，我认为我们有一个像这样的干净解决方案。想法是将td的font-size设置为0，它将完全隐藏文本节点：

.col[style*="display:none"] {
  display:table-cell!important;
  font-size:0;
}
.col > span {
  font-size:20px;
}

Demo.

【讨论】：

@War10ck 谢谢，但是使用相对字体大小有一个限制（我在答案中也提到过），有时固定/绝对字体大小是可以接受的。希望它适合 OP 的情况。
考虑到这个选择器会找到display:none，但不会 display: none（带空格）。
@Andrew 是的，没错。但是，答案是针对 OP 的特定代码。这里的主要思想仍然很有价值。 OP 不应该使用这样的内联样式，但是他可以声明一个 hidden 类，然后 .col[style*="display:none"] 可以变成 .col.hidden 这应该可以正常工作（没有无意的异常）
是的，我没有批评您的解决方案，而只是提及要考虑的东西，因为昨天我在选择器无法正常工作时挠头。 :)

【解决方案2】：

您可以使用visibility 属性，但这将为文本“AAA”保留空间：

.col {    
    visibility:hidden;
}

.clear-icon {
    visibility:visible;
}

另外，如果您无法从 td 标记中删除 display:block !important;，只需在 CSS 中添加 !important 规则

.col {
    display:block !important;
    visibility:hidden;
}

【讨论】：

【解决方案3】：

http://jsfiddle.net/vLNEp/4/

<table><tr><td class="col"><span class="hidden">AAA</span>
      <span prop="1" class="clear-icon"></span>
</td></tr></table>

.col .hidden {position:absolute;top: -9999px; left: -9999px;}

【讨论】：

看起来如果我们有更多文本（除了AAA 之外的长文本），它看起来不会像这样jsfiddle.net/viphalongpro/7bM95/27
更新了我的答案。即使将元素设置为隐藏，它也无法正常工作。它会占用空间。
但是我认为OP的HTML代码是固定的（它是由某些引擎生成的，所以他不能编辑它，他只能编辑CSS文件）。所以你更新的代码不会是 OP 可以使用的。

【解决方案4】：

.col {
    visibility:hidden;
}

.col span {
    visibility:visible;
}

<table>
    <td class="col">
        AAA <span>Show Me</span>
    </td>
</table>

【讨论】：