CSS 将内容包装在程式化的容器中？

Question

我有一个为 <LABEL>.

指定样式的样式表

但有些 <LABEL> 是特殊的：目前我将它们内联样式设置为这样：

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

我怀疑有一种方法可以指定 CSS class，也许叫做 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 添加伪元素。

这里是fiddlehttps://jsfiddle.net/c3h9a2b9/1/

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

这通过在您的标签上使用 :before 或 :after 伪元素来伪造填充。它需要一个块的显示（内联块也可以）和一些尺寸，这里的宽度是 20px（你需要的 "padding"）并且在你想要填充的方向上浮动....

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 将内容包装在程式化的容器中？

CSS to wrap contents in stylized container?

css

css-selectors

pseudo-element