我可以在一个CSS类中指定两种不同的样式吗？

Question

HTML：

<span class="foo">Hello</span>

我希望CSS类“foo”定义如下：所附内容的第一个字母是红色，其余字符是绿色。这可能吗？

编辑：

如果我想要相反的东西怎么办？我希望第一个字母可以从任何样式中排除（除了任何父样式），其余所有字母都是绿色的。

Answer 1

使用first-letter pseudo selector：

.foo { color: green; display: inline-block; }

.foo:first-letter { color: red; }

这是小提琴：http://jsfiddle.net/ZLapy/

---

注意： :first-letter选择器不适用于inline元素。
您必须使用block，inline-block或table。

Answer 2

是的，:first-letter伪选择器。

span.foo:first-letter
{
font-size:200%;
color:#8A2BE2;
} 

Answer 3

是的，您可以使用第一个字母的伪元素来执行此操作。

示例：

.foo{ color: red; }

和

.foo:first-letter{ color:green; }

第一个字母的伪元素（因此名称）将改变范围中第一个字母的属性。

您可以阅读有关如何执行此操作的更多信息@ http://www.w3schools.com/cssref/sel_firstletter.asp

编辑：

如果你想做相反的事情，并且从样式中排除第一个字母，最简单的方法是完全排除跨度中的第一个字母。您还可以将第一个字母的颜色更改为页面上其余文本的颜色（默认颜色）。