3

我有以下 DOM 结构：

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

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

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

4

3 回答 3

2

There is no such selector in CSS. Selectors can only select elements or pseudo-elements, and there is no pseudo-element that would help here.

You can, however, hide the text with CSS, if the label element contains only the select element and the text to be hidden. You would hide the label element and “unhide” the select element. You cannot use display: none, since it hides all children. But there are other ways.

Perhaps the simplest is this:

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

You can alternatively set the font size to zero and then the desired font size on the select element:

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

Unfortunately, you need to set the font size in physical units here (or use the rem unit, but its browser support is still limited).

Some browsers have a setting for minimal font size, but it does not seem to apply to a zero font size.

于 2013-04-07T08:41:33.313 回答
0

这个怎么样？

label {
   font-size: 0;
}
label p {
   font-size: 14px;
}
于 2013-04-07T08:46:03.867 回答
-2

我将以这个 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 标签的文本是红色的。

演示

于 2013-04-07T07:29:32.893 回答