权重练习
代码
<!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> /* 权重计算为（0,0,2） */ span,p { background-color: aquamarine; } /* 权重计算为（0,1,0） */ .box{ color: red; } /* 权重计算为（0,1,1） */ .box > span{ color:blue; } /* 权重计算为（1,0,0） */ #s3{ color:green; } /* 权重计算为（1,1,1）比（1,0,0）大 可以覆盖单纯id选择器的样式 */ .box>.s3#s3 { color: darkviolet; } /* 调试样式表的权重最高无视所有选择器 */ .s5{ color: black !important; } </style></head><body><div class="box"><span>s1</span></div><div class="box"><p>p2</p></div><div class="box"><span id="s3">s3</span></div><div class="box"><span class="s3" id="s3">s3</span></div><div class="box"><span class="s5" id="s3">s5</span></div></body></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>Document</title> <style> /* 根据:nth-of-type(an+b)计算公式[an+b]取一组偶数，a=2 n=n b=0 则计算公式为[2n+0] 又因计数器n的取值必须是有效的, 且从 1 开始的正整数 即为 2*1 2*2 2*3 2*4 ...以此类推 简化为:nth-of-type（2n）的公式为取偶数的公式 同理:nth-of-type（2n+1）为取偶数的公式 */ .list > :nth-of-type(2n){ color: red; } .list > :nth-of-type(2n+1){ color:aqua; } .list > :nth-last-of-type(2){ color:blue; } </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> </ul></body></html>
代码效果图
