Question

您好我有这个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;
}

你可以看到粗体对它没有影响，我无法理解为什么？火狐也是如此。

Answer 1

问题是：第一个字母不能用于内联元素（例如span），而是用于块/内联块元素（例如p，表格标题，表格单元格等）。 / p>

因此，最好应用：首字母到p而不是跨度。

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

如果你真的需要：跨度上的第一个字母选择器，你仍然可以添加display：block到span

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

Answer 2

每MDN：

第一行只在块容器盒中有意义，因此 :: first-letter伪元素只对带有a的元素有影响显示块，内联块，表格单元格，列表项目或表标题。在所有其他情况下，:: first-letter无效。

解决此问题的一种简单方法是将跨度显示更改为内联块：

span {
    display:inline-block
}

<强> jsFiddle example

Answer 3

每MDN：

第一行只在块容器盒中有意义，因此 :: first-letter伪元素只对带有a的元素有影响显示块，内联块，表格单元格，列表项目或表标题。在所有其他情况下，:: first-letter无效。

解决此问题的一种简单方法是将跨度显示更改为内联块：

span {
    display:inline-block
}

<强> jsFiddle example

大胆的第一封信不起作用

3 个答案: