CSS：选择不在span标签内的文本

Question

我有以下DOM结构：

<label>
    <select>
    ...
    </select>
    records at one one time
</label>

现在，我想使用媒体查询，如果网页在基于移动设备的浏览器中查看，则隐藏一次显示的记录文本。 我的问题是如何选择此处的文本？请注意，此DOM是由库（DataTables）自动生成的，我无法控制它，因此无法添加span类。 我希望对于移动浏览器，只显示选择而不显示一次显示的记录——我该怎么做？

- callmekatootie

Answer 1

在CSS中不存在这样的选择器。选择器只能选择元素或伪元素，这里没有任何伪元素可以帮助解决问题。

但是，如果元素仅包含元素和要隐藏的文本，则可以使用CSS隐藏文本。您需要隐藏元素并“取消隐藏”元素。不能使用“display: none”，因为它会隐藏所有子元素。但有其他方法。

可能最简单的方法是这样的：

label { visibility: hidden;}
select { visibility: visible; }

您可以选择将字体大小设置为零，然后在 select 元素上设置所需的字体大小：

label { font-size: 0; }
select { font-size: 12pt; }

不幸的是，在这里您需要使用物理单位设置字体大小（或使用rem单位，但其浏览器支持仍然有限）。

一些浏览器具有最小字体大小的设置，但似乎不适用于零字体大小。

- Jukka K. Korpela

Answer 2

这个怎么样？

label {
   font-size: 0;
}
label p {
   font-size: 14px;
}

- Anurag Peshne

---

p 可以替换为 select。 - Anurag Peshne

Answer 3

我将以这个HTML为例：

<label>
    <p class="test">This is a test</p>
    records at one one time
</label>

这真的取决于您想应用什么样的样式。只要不影响元素的盒模型，您可以通过为标签应用默认的CSS样式来实现，这将影响带有和不带有p标记的文本：

label {
    color:red;
}

然后，您可以使用以下方式覆盖 p 标签中的文本：

label p {
    color:yellow;
}

现在你可以看到，没有p标签的文本是红色的。

演示

- Eli

---

这如何隐藏文本？ - Daniel Imms