如何使用css为一个标签字段添加不同的样式？

Question

您好我有一个有价值的标签，但我需要为这些单词添加不同的样式。

<label> 00001 M2 Available </label>

label{
font-size:15px;
}

字体大小15px应仅应用于0001。任何人都可以帮我解决这个如何使用css。

Answer 1

目前唯一可行的方法是将第一个单词（或其他任何单词）包装在特定元素中并设置该元素的样式：

<label><span>0001</span> M2 Available</label>

label span {
    font-size: 15px;
}

您可以使用CSS设置::first-letter和::first-line伪元素的样式，但由于某种原因，W3C选择不允许或不认为允许::first-word伪 - 元素。

从测试（在Chromium 28 / Win XP中）看来，使用::first-line伪元素将设置第一个单词的样式（虽然我不认为这是一个指定的行为），因此它可能不是可靠的跨浏览器：

label {
    display: inline-block;
}

label::first-line {
    font-size: 2em;
}

JS Fiddle demo

参考文献：

• CSS Pseudo-elements。

Answer 2

首先，David的解决方案是完美的，但是如果你不想添加任何额外的元素，那么你可以使用content: ""属性..如果你仍然不能使用它，那么你需要去的JavaScript

Demo

label.class_name:before {
    content: "00001";
    color: red;
}

Answer 3

检查js小提琴

http://jsfiddle.net/9v2n4/

<label> <span style="font-size:15px">00001</span> M2 Available </label>

Answer 4

为您的标签跨度添加一个班级<label><span class="labelItem"> 00001</span> M2 Available </label>。然后设置类.labelItem { font-size: 15px; }

Answer 5

HTML：

<label><p class="p01">00001</p> M2 Available</label>

CSS：

p.p01{
font-size:15px;
}