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

Question

我有以下 DOM 结构:

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

现在，如果使用媒体查询在基于移动设备的浏览器中查看网页，我打算隐藏文本一次记录。

我的问题是如何选择此处的文本？请注意，此 DOM 是由库 (DataTables) 自动生成的，我无法控制它，因此无法添加 span 类。我希望对于移动浏览器，只显示选择而不显示一次记录 - 如何实现这一点？

Answer 1

CSS 中没有这样的选择器。选择器只能选择元素或伪元素，没有伪元素可以帮到这里。

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

也许最简单的是:

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

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

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

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

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