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

Question

我对 CSS 不起作用并不感到惊讶，但我希望你明白了。有 2 个列表，我试图将第一个 ul 中第一个 a 的第一个字母作为目标。在此示例中，它是 Beauty Salons。我可以在不更改 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> 就可以了标记为 block 显示元素:

.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选择器将仅适用于 block 元素，而不适用于内联元素。

Here is an example fiddle .