無序列表、有序列表、定義列表多樣選擇設定屬性值
<!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>