选择器权重
规则: 将任何一个"选择器"视为由:`id,class,tag`组成的 3 位整数当某个位置出现相应选择器类型时,将该位置置`1`即可id: 千位class: 百位 tag: 个位<!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> </head> <body> <h3>Hello</h3> <div class="hello">Hello world</div> </body> <style> h3 { color: blueviolet; } /* 0,0,1 */ body h3 { color: black; } /* 0,0,2 */ /* 0,0,1<0,0,2 */ .hello { color: rgb(33, 223, 26); } /* 0,1,0 */ div.hello { color: blue; } /* 0,1,1 0,1,0<0,1,1 */ </style></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> </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> </ul> </body> <style> /* 公式: `:nth-of-type(an+b)` */ /* 匹配一个: `a = 0` */ .list > :nth-of-type(2) { background-color: rgb(223, 19, 212); } /* 匹配一组: `a = [1]`;'n=[0, 1, 2,...]'' */ .list > :nth-of-type(n + 4) { background-color: rgb(131, 223, 235); } </style></html>
