<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* id=1 class=1 tag=1 故111*/ h1.name#user{ color:blue; } /* id=0 class=1 tag=1 故011*/ h2.name{ color:lightgreen } /* id=1 class=0 tag=1 故101*/ h2#user{ color:green } /* 比较权重大小 */ h2{ color: black; /* 此时权重为001，无法修改第四个h2标签颜色 */ } h2.name#user{ color:chartreuse /* 此时权重为111，可以修改第四个h2标签颜色且其他样式无法影响当前样式*/ } /* 选中第一个 */ .list>li:first-of-type{ background-color: blue; } /* 选中最后一个 */ .list>li:last-of-type{ background-color: yellow; } /* 选择第三个 第四个 */ .list > li:nth-of-type(3){ background-color: pink; } .list > li:nth-of-type(4){ background-color: pink; } /* 选择前三个 */ .list>li:nth-of-type(-n+3){ background-color: purple; } /* 选择后三个 */ .list>li:nth-of-type(n+6){ background-color: blue; } /* 选择偶数个 */ .list>li:nth-of-type(2n){ background-color: red; } /* 选择奇数个 */ .list>li:nth-of-type(2n+1){ background-color: black; } /* 选择全部 */ .list>li:nth-of-type(n){ background-color: green; } </style></head><body> <h1 class="name" id="user">你好</h1> <h2 class="name">你好</h2> <h2 id="user">你好</h2> <h2 class="name" id="user">你好</h2> <ul class="list"> <li class="item">item1</li> <li class="item">item2</li> <li class="item">item3</li> <li class="item">item4</li> <li class="item">item5</li> <li class="item">item6</li> <li class="item">item7</li> <li class="item">item8</li> </ul></body></html>
