Question

我有以下代码做我想要的，但想看看我是否可以简化为一行而不使用两个html元素

<head runat="server">
    <title></title>
    <style type="text/css">
        .FirstLetter{color:White; background:Blue; border:1px black solid; padding-top:10px; padding-left:10px;}
        .Spaced{letter-spacing: 5px;}   
    </style>

</head>
<body>
    <form id="form1" runat="server">
        <span class="FirstLetter">
            R
        </span>
        <span class="Spaced">
            ealtime Account Activiation
        </span>

    </form>
</body>
</html>

我可以在像这样的html元素中使用单个内联文本：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
   <style type="text/css">
        .FirstLetter{color:White; background:Blue; border:1px black solid; padding-top:10px; padding-left:10px;}
        .Spaced{letter-spacing: 5px;}   
    </style>
</head>
<body>
    <form id="form1" runat="server">

    <div class="FirstLetter Spaced">
        Realtime Account Activiation
    </div>

    <div class=""FirstLetter Spaced"">
        Announcements
    </div>
    </form>
</body>
</html>

Answer 1

您可以使用伪元素:first-letter来实现您需要在css规则的类.FirstLetter之后添加它，例如：

.FirstLetter:first-letter{color:White; background:Blue; border:1px black solid; padding-top:10px; padding-left:10px;}。

这是一个使用html第二部分的示例：http://jsbin.com/eqicu4

当然，它需要进行一些修改才能使其完全符合第一个例子。

我可以为每个单独的html div或span元素组合两个css类吗？

1 个答案: