使用CSS选择器定位HTML标签文本

Question

给定以下HTML，是否可以使用CSS选择器将标签内的文本定位？

<fieldset class="sl">
    <legend>
        Text Inputs
    </legend>
    <label>
        Text Input:
        <input type="text" />
    </label>

    <label>
        Read-only Text Input:
        <input type="text" readonly value="this is read-only" />
    </label>
</fieldset>

因此，在上面，我要定位“文本输入”或“只读文本输入：”并设置宽度以对齐文本框的左侧位置。

我能想到的唯一有效的方法是将文本包裹在一个范围内。

<label>
    <span>Text Input:</span>
    <input type="text" />
</label>

使用CSS选择器：

fieldset.sl label span {
    width: 200px;
    display: inline-block;
}

仅供参考-我正在考虑使用CSS来兼顾两者，在CSS的同一行和输入上方的单独行之间切换-无需修改html结构-只是对fieldset类进行了调整，例如以下使用标签中的文本包裹在一个跨度中。

Answer 1

不幸的是，唯一允许您设置纯文本样式的CSS属性主要与字体操作，颜色和字母间距有关。

您有几个最佳实践解决方案来实现您想要的。

• 您可以将每个文本包装在 <span>
• 或者你可以使用更清洁的替代方案是通过使用<label>标签来包装实际标签和使用的for属性上<label>元素把它与它的具体input领域。

对于第二个示例，而不是这样：

<label>
    <span>Text Input:</span>
    <input type="text" />
</label>

您最终会得到以下结果：

<label for="textinput">Text Input:</label>
<input type="text" id="textinput" />

如果仍然希望将每个分组input与各自的分组<label>并保持对字段组的完全控制，则可以始终将它们包装在一个<div>标签中，如下所示：

<div class="field-group">
    <label for="textinput">Text Input:</label>
    <input type="text" id="textinput" />
</div>