Question

我有一个嵌套的列表，如下所示：

*列表

列表项目（样式为li）
列出项目

*列表
- 列表项
- 列表项
列表项
列表项

整个UL包含在ID为“menu”的DIV中，每个列表元素也包含我想要设置样式的链接。

我有这样的CSS规则：

#menu > ul > li > a::first-letter {
    font-size: 105%;
    font-weight: bold;
}

我只希望此规则应用于第一级LI元素中的链接，而不是第二级嵌套列表中的列表元素。

非常感谢任何信息。

修改

我的代码有效，但它只会更改嵌套列表中的元素，当我只希望它只应用于第一级时。

Answer 1

您只能选择::first-letter块级元素，因此，要选择锚元素的::first-letter（内联元素），您需要更改其display属性到block或inline-block。

＆＃13;

a{color:#000;display:inline-block;}
div>ul>li>a::first-letter{color:#f00;font-size:105%;font-weight:bold;}

＆＃13;

<div>
    <ul>
        <li><a href="#">One</a>
            <ul>
                <li><a href="#">Two</a></li>
            </ul>
        </li>
    </ul>
</div>

＆＃13;

Answer 2

在li

中使用第一个字母的类

#menu > ul > li::first-letter {
    font-size: 105%;
    font-weight: bold;
    color: red;
}

<div id="menu">
<ul>
    <li><a href="#">ABC</a></li>
    <li><a href="#">DEF</a></li>
    <li><a href="#">GHI</a></li>
</ul>
</div>

CSS列表样式，仅限第一个元素

2 个答案: