1. 选择器权重
html内容
<!DOCTYPE html><html lang="en"><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><link rel="stylesheet" href="style2.css"></head><body><h1><!-- 权重（0，0，2） --><div>实例测试一</div><!-- 权重（0，1，0） --><div class="test">实例测试二</div><!-- 权重（1，0，0） --><div id="test">实例测试三</div><!-- important无视权重 --><div id="test" class="test2">实例测试四</div></h1></body></html>
style2.css内容
h1 {color: aqua;}#test {color: blue;}.test {color: purple;}.test2 {color: brown !important;}
效果截图
2. 常用伪类选择器
关系式：:nth-of-type(an+b),其中a与b为人为赋值，n为自增函数（0，1，2，3....）.（a为系数，b为偏移量）从头开始计数为: :nth-of-type()从后面开始计数为： ：nth-last-of-type()偶数行实现样式：：nth-last-of-type(even)奇数行实现样式：：nth-last-of-type(odd)
html内容
<!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>伪类选择器</title><style>@import url("css/selector-fake.css");</style></head><body><ul class="list"><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li><li>item6</li><li>item7</li><li>item8</li><li>item9</li><li>item10</li><li>item11</li><li>item12</li><li>item13</li><li>item14</li><li>item15</li><li>item16</li><li>item17</li><li>item18</li></ul></body></html>
selector-fake.css内容
.list>li:nth-of-type(3n+2) {background-color: violet;}/* 当n=0，1，2，3，4，5时，具体的表现结果 */
效果展示
