Question

我有以下DOM结构：

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

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

我的问题是如何在此处选择文字？请注意，此DOM由库（DataTables）自动生成，我无法控制它，因此无法添加span类。我希望对于移动浏览器，只显示选择而不是records at one time - 如何实现这一目标？

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单位，但其浏览器支持仍然有限。）

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

Answer 2

这个怎么样？

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

Answer 3

我将以此HTML为例：

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

这实际上取决于您想要应用的样式。只要它不影响元素的box-model，您就可以通过为标签应用默认的css样式来实现它，这将影响带有和不带p标记的文本：

label {
    color:red;
}

然后你可以使用：

覆盖p标签中的文本

label p {
    color:yellow;
}

现在你可以看到只有没有p标签的文字才有红色。