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

FYI - 我在看使用CSS在同一行和单独的行输入上述标签之间切换具有两全其美 - ，而不必修改html结构 - 只对fieldset类进行调整，就像使用span中包装的标签中的文本一样。

Answer 1

不幸的是，唯一的CSS属性，让你的风格的纯文本大多涉及到font manipulation, color and letter spacing。

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

• 您可以在一个<span>
• 包装每个文字或者你可以使用更清洁的替代方案是使用<label>标签包裹的实际标签和使用the for attribute的<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> 

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>