<!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>
无序列表、有序列表、定义列表多样选择设置属性值
猜你喜欢
转载自www.cnblogs.com/tian-520/p/TianYong1.html
今日推荐
周排行