html - 使用 CSS 隐藏或删除 HTML 元素的部分内容

Question

问题

我无法改变下面 HTML 的输出方式，但我确实需要修改它的显示方式。我知道我可以用 jQuery 达到我想要的结果, 但我想用纯 CSS 来做可能吗？

我到底需要做什么

我需要显示 input来自下面的 HTML，但是 label本身就是多余的。标签可以留下或离开，我不介意，但是Username和 <br>需要离开。

显然我不能使用 label[for="user_login"]{ display: none; } ，因为这会失败，因为它将隐藏选择器中的所有内容。

原始 HTML

<label for="user_login">
    Username
    <br>
    <input id="user_login" class="input" type="text" size="20" value="" name="log">
</label>

所需的 HTML

<label for="user_login">
    <input id="user_login" class="input" type="text" size="20" value="" name="log">
</label>

jQuery 方法

$(document).ready(function(){

    var username_label = $('label[for="user_login"]'),
        username_input = username_label.find('input');

    username_label.html(username_input);

});

为什么我不想使用 jQuery

相关登录的显示方式因屏幕尺寸而异。在较小的设备上，我要求隐藏标签(以节省空间)，而在较大的屏幕上，标签应该仍然可见。在这两种情况下，使用 jQuery 方法都会删除标签。

虽然我知道我可以在加载时检查屏幕宽度，然后使用 resize事件(如有必要)，如果屏幕尺寸发生变化(例如在平板电脑上，从纵向到横向)，标签可以被移除，然后在需要时不可见。

问题

我可以用纯 CSS 实现这个结果(或类似结果)吗？ ？

Answer 1

试试这个 CSS:

label {
    visibility:collapse;
}

label input {
    visibility: visible; 
}

这是一个 jsfiddle: http://jsfiddle.net/entgqjzk/

我修改了在 Hide text node in element, but not children 找到的 css

编辑:

这不会像您指出的那样删除空格。我想不出比 jQuery 和 css 的组合更好的东西，它不是有史以来最漂亮的代码，但它确实适用于您无法控制 html 的这种情况:

http://jsfiddle.net/entgqjzk/2/

例如，css 类“hidden-for-mobile”可以与移动设备的单独样式表(或不同屏幕尺寸的伪选择器)结合使用