无序列表有序列表定义列表多样选择设置属性值
Posted tian-520
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了无序列表有序列表定义列表多样选择设置属性值相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
/*内联样式*/
<style>
li {
/* //去掉前面的符号 */
list-style: none;
/* //给列表前面添加罗马数字 */
list-style: lower-roman;
}
/* //选择列表中的第四项 */
li:nth-child(4) {
background-color: red;
}
/* //选择列表中的最后一项 */
li:last-child {
background-color: red;
}
/* //选择列表的奇数 */
li:nth-child(odd) {
background-color: red;
}
/* //选择列表中的双数 */
li:nth-child(even) {
background-color: orange;
}
/* //选择中间间隔两个列表 */
li:nth-child(3n+1) {
background-color: red;
}
/* //除了最后一个其他的全部选择 */
li:not(:last-child) {
background-color: red;
}
/* //选择列表的前三个列表 */
li:nth-child(-n+3) {
background-color: red;
}
/* //选择列表的第三个 */
li:nth-child(3)>a {
background: red;
}
</style>
</head>
<body>
<!-- 无序列表： -->
<ul>
<li></li>
<li></li>
</ul>
<!-- 有序列表： -->
<ol>
<li></li>
<li></li>
</ol>
<!-- 定义列表： -->
<dl>
<dt>
<dd></dd>
<dd></dd>
</dt>
</dl>
</body>
</html>
以上是关于无序列表有序列表定义列表多样选择设置属性值的主要内容，如果未能解决你的问题，请参考以下文章
HTMLHTML 列表 ( 无序列表 | 有序列表 | 自定义列表 )
HTML前端：三种列表“无序列表 有序列表 自定义列表“ 定义