使用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>

所以在上面，我想要定位＆＃34;文本输入＆＃34;或＆＃34;只读文本输入：＆＃34;并设置宽度以对齐文本框左侧位置。

我唯一能想到的就是将文本包装在一个范围内。

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

使用CSS选择器：

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

仅供参考 - 我正在寻找两个世界中最好的两个世界，使用CSS在同一行上的标签和输入上方的单独行之间切换 - 无需修改html结构 - 只需对字段集类进行调整，如下所示，它使用包含在span中的标签中的文本。

Answer 1

不幸的是，允许您设置纯文本样式的唯一CSS属性主要与font manipulation, color and letter spacing相关。

您可以通过几种最佳实践解决方案来实现您的目标。

• 您可以将每个文字包装在<span>
中
• 或者您可以使用更清晰的替代方法，即使用<label>标记来包装实际标签，并使用<label>元素上的the for attribute将其与其特定{{{}}相关联1}} field。

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

input

你最终会得到这个：

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

如果您仍希望将每个<label for="textinput">Text Input:</label> <input type="text" id="textinput" /> 与其各自的input分组并保持对字段组的完全控制，则可以始终将它们包装在<label>标记中，如下所示：< / p>

<div>

Answer 2

您可以在此处使用CSS Grid Layout并使label成为网格容器。这样label的文本将包含在匿名网格项中。

来自CSS grid specs：

  

直接包含在grid container中的每个连续文本都包含在匿名grid item中。但是，不会呈现仅包含white space的匿名网格项，就好像它是display: none一样。

演示：

.sl label {
  display: flex;
}

.sl label {
  display: grid;
  grid-template-columns: 200px 1fr;
}

<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>