html - 粗体跨度第一个字母不起作用

Question

此处示例:http://jsfiddle.net/wsAK2/

你好，我有这个 html 代码:

<ul class="sidebar-nav">
    <li class="sidebar-top"></li>
    <li class="active">
        <div class="shadow-container">
            <div class="menu-indicator"></div>
            <a href="#" data-toggle="collapse" data-target="#dashboard"><i class="fa fa-home"></i>Dashboard<i class="fa fa-angle-down"></i></a>
            <ul id="dashboard" class="collapse">
                <li><a href="#">Action</a>
                </li>
                <li><a href="#">Another action</a>
                </li>
                <li><a href="#">Something else here</a>
                </li>
                <li><a href="#">Separated link</a>
                </li>
            </ul>
        </div>
        <div class="menu-arrow"></div>
    </li>
    <li>
        <div class="shadow-container">
            <div class="menu-indicator"></div>
            <a href="#" data-toggle="collapse" data-target="#charts"><i class="fa fa-signal"></i><span>Charts</span><i class="fa fa-angle-down"></i></a>
            <ul id="charts" class="submenu collapse">
                <li><a href="#">Action</a>
                </li>
                <li><a href="#">Another action</a>
                </li>
                <li><a href="#">Something else here</a>
                </li>
                <li><a href="#">Separated link</a>
                </li>
            </ul>
        </div>
        <div class="menu-arrow"></div>
    </li>
    <li>
        <div class="shadow-container">
            <div class="menu-indicator"></div>
            <a href="#"><i class="fa fa-users"></i><span>Users</span></a>
        </div>
        <div class="menu-arrow"></div>
    </li>
    <li>
        <div class="shadow-container">
            <div class="menu-indicator"></div>
            <a href="#"><i class="fa fa-calendar-o"></i><span>Calendar</span></a>
        </div>
        <div class="menu-arrow"></div>
    </li>
    <li>
        <div class="shadow-container">
            <div class="menu-indicator"></div>
            <a href="#"><i class="fa fa-gamepad"></i><span>Services</span></a>
        </div>
        <div class="menu-arrow"></div>
    </li>
    <li>
        <div class="shadow-container">
            <div class="menu-indicator"></div>
            <a href="#"><i class="fa fa-gears"></i><span>Options</span></a>
        </div>
        <div class="menu-arrow"></div>
    </li>
    <li>
        <div class="shadow-container">
            <div class="menu-indicator"></div>
            <a href="#"><i class="fa fa-envelope"></i><span>Email</span></a>
        </div>
        <div class="menu-arrow"></div>
    </li>
</ul>

和以下CSS规则:

.sidebar-nav > li > div > a > span:first-letter {
        font-weight:bold;
}

这是用 chrome 检查的 span 元素:

media="screen"
.sidebar-nav > li > div > a > span:first-letter {
font-weight: bold;
}

如您所见，粗体对其没有影响，我不明白为什么？同样的事情也发生在 Firefox 中。

Answer 1

问题是，:first-letter 不适用于行内元素(例如 span)，但适用于 block /行内 block 元素(例如 p、表格标题、表格单元格等)。

因此，最好将 :first-letter 应用于 p 而不是 span。

 p:first-letter {font-weight: bold;}

如果你真的需要 :first-letter 选择器在 span 上，你仍然可以添加 display:block 到 span

 .sidebar-nav > li > div > a > span { display: inline-block; }