Question

我并不感到惊讶，CSS不起作用，但我希望你明白这一点。有2个列表，我试图定位第一个a中第一个ul的第一个字母。在这个例子中，它是美容沙龙的B。我可以在不更改HTML的情况下使用CSS吗？

CSS：

.tab-pane .category-headings ul:first-of-type a:first-of-type::first-letter {
    margin-right: 1px;
    padding: 0px 5px;
    background-color: #666;
    color: #fff;
    font-weight: bold;
}

HTML：

<div class="tab-pane" id="b">
    <div class="container-fluid category-headings">
        <div class="row-fluid">
            <div class="span11 offset1">
                <div class="row-fluid">
                    <div class="span4">
                        <ul class="unstyled">
                            <li><a href="./beauty-salons-and-therapy/">Beauty Salons &amp; Therapy</a>
                            </li>
                            <li><a href="./blinds/">Blinds</a>
                            </li>
                        </ul>
                    </div>
                    <div class="span4">
                        <ul class="unstyled">
                            <li><a href="./book-binders/">Book Binders</a>
                            </li>
                            <li><a href="./bookkeeping-services/">Bookkeeping Services</a>
                            </li>
                        </ul>
                    </div>
                    <div class="span4">
                        <ul class="unstyled">
                            <li><a href="./builders/">Builders</a>
                            </li>
                            <li><a href="./building-plans/">Building Plans</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

FIDDLE： http://jsfiddle.net/a4644b8h/2/

Answer 1

如果将<a>标记设置为块显示元素，则此方法有效：

.tab-pane .category-headings ul:first-of-type li:first-of-type a:first-of-type::first-letter {
    margin-right: 1px;
    padding: 0px 5px;
    background-color: #666;
    color: #fff;
    font-weight: bold;
}

.tab-pane .category-headings ul:first-of-type li:first-of-type a:first-of-type {
    display: inline-block;
}

这是因为:first-letter选择器仅适用于块元素，而不适用于内联元素。

Here is an example fiddle

Answer 2

首先，您需要更改其中一些选择器。你不是在寻找ul:first-of-type。这将选择每个ul div中的第一个<div class="span4">。相反，您希望使用class="span4"定位第一个div，如下所示：

.span4:first-of-type

接下来，基本上相同的是，您不希望定位a:first-of-type，这会在每个a元素中选择第一个li标记。相反，定位第一个li，如下所示：

li:first-of-type

然后定位第一个a

内的li标记

所以，把所有这些放在一起：

.tab-pane .category-headings .span4:first-of-type li:first-of-type a::first-letter {

}

另外，正如Alan所提到的，::first-letter伪元素的父元素必须是块级元素，所以添加

.span4 a { /* make this selector as specific as you need it */
    display: inline-block;
}

那应该这样做。 JSFiddle here

CSS：如何设置第一个列表中第一个链接的第一个字母的样式？

2 个答案: