代码之家 › 专栏 › 技术社区 › mohammad

使用nth-child()在标记中设置li样式

css html

mohammad · 技术社区 · 5 年前

<ul>
    <a href=""><li>this is test </li></a>
    <a href=""><li>this is test </li></a>
    <a href=""><li>this is test </li></a>
    <a href=""><li>this is test </li></a>
</ul>

和风格:

a:nth-child(even){
    background-color: #f5f5f5;
    border-right: 2px solid #666;
}

.li:hover{
    background-color: #555;
    color: #fff;
}

1 回复 | 直到 5 年前

jeprubio 5 年前

在你的css中你有: .li 以li类元素为目标(比如 <div class="li">

你说得对,李应该是ul tag的直系子:

ul li:nth-child(even) {
    background-color: #f5f5f5;
    border-right: 2px solid #666;
 }

ul li:hover{
    background-color: #555;
    color: #fff;
}

<ul>
    <li><a href="">this is test</a></li>
    <li><a href="">this is test</a></li>
    <li><a href="">this is test</a></li>
    <li><a href="">this is test</a></li>
</ul>

如果只需要链接的背景而不是所有列表项:

ul li:nth-child(even) a {
    background-color: #f5f5f5;
    border-right: 2px solid #666;
}

ul li:hover a {
    background-color: #555;
    color: #fff;
}

<ul>
<li><a href=“”>这是测试</a></li>
<li><a href=“”>这是测试</a></li>
</ul>

推荐文章

Softly · 单选按钮未按预期取值

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

eXor420 · 如何在脚本标记中使用导出的函数?

1 年前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Kernier · 如何将数学公式支持添加到StacksEditor?

1 年前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

1 年前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

1 年前

Akshay mek · Vscode扩展建议不适用于某些文件夹

1 年前