CSS将内容包装在风格化的容器中？

Question

我有一个为<LABEL> 指定样式的样式表。

但有些<LABEL>s 很特别：目前我将它们内联样式如下：

<LABEL style="text-align:right; line-height:15pt">
    <div style="padding-right:20px">My Label Text</div>
</LABEL>

我怀疑有一种方法可以指定一个 CSS 类，可能称为 rightlabel，以使用如下简单的方式呈现前面的内容：

<LABEL class="rightlabel">My Label Text</LABEL>

这样做的正确方法是什么？即，有没有办法在 CSS 中定义 rightlabel 以生成覆盖的 <LABEL> 同时自动将其子项包装在填充的子容器中（因为除非这样做，否则样式无法正常工作，并且依靠编码器实现两个元素来获得正确的样式似乎不合适）？

修正：我可以使用子选择器实现大部分目标——如this fiddle 所示，使用此 CSS：

.rightLabel {text-align: right}
.rightLabel > * {padding-right: 20px}

但是如果不将内容显式包装在某个容器中，我找不到将填充应用于标签内容的方法。即，上面的 CSS 可以正常工作

<LABEL class="rightLabel">
  <div>This is what we wanted!</div>
</LABEL>

但不上

<LABEL class="rightLabel">Why am I not padded?</LABEL>

是否可以将样式应用于<LABEL> 内容而不在另一个 HTML 元素（子元素）中显式编码？

Answer 1

像这样定义你的样式：

<style> 
.rightLabel
{
    text-align:right;
}

.rightLabel div 
{
    padding-right:20px;
}
</style>

更新更新的问题：您不能使用 CSS 添加 div，您需要 JavaScript。您可以使用 :before 和 :after 添加伪元素。

这是一个小提琴https://jsfiddle.net/c3h9a2b9/1/

.rightLabel:before {
  display:block;
  content:' ';
  width:20px;
  float:right;
}

这会通过在标签上使用 :before 或 :after 伪元素来伪造填充。它需要显示块（inline-block 也可以）和一些尺寸，这里的宽度为 20px（您需要的“填充”）并在您想要填充的方向上浮动....

Answer 2

如果我理解正确你的问题，答案就是这个 CSS：

label{
    //Your general label style
}
label.rightlabel{
    text-align: right;
    line-height: 15pt;
}
label.rightlabel div{
    padding-right: 20px;
}

有了这个 HTML 就可以如你所愿

<label>a normal label</label>
</label class="right label"><div>the special label</div></label>

这是因为默认情况下更具体的 CSS 会覆盖不太具体的 CSS :)