前端速成（7）css
就近原则，但font-size依旧生效
<!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>行高的继承</title> <style> body { color: pink; /* 12px是字体大小，24px是行高 */ /* font: 12px/24px 'Microsoft YaHei'; */ font: 12px/1.5 'Microsoft YaHei'; } div { /* 子元素继承了父元素 body 的行高 1.5 */ /* 这个1.5 就是当前元素文字大小 font-size 的1.5倍 所以当前div 的行高就是21像素 */ font-size: 14px; } p { /* 1.5 * 16 = 24 当前的行高 */ font-size: 16px; } /* li 么有手动指定文字大小 则会继承父亲的 文字大小 body 12px 所以 li 的文字大小为 12px 当前li 的行高就是 12 * 1.5 = 18 */ </style> </head> <body> <div>粉红色的回忆</div> <p>粉红色的回忆</p> <ul> <li>我没有指定文字大小</li> </ul> </body> </html>
<!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>CSS优先级</title> <style> .test { color: red; } div { color: pink!important; } #demo { color: green; } </style> </head> <body> <div class="test" id="demo" style="color: purple">你笑起来真好看</div> </body> </html>
<!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>css权重注意点</title> <style> /* 父亲的权重是 100 */ #father { color: red!important; } /* p继承的权重为 0 */ /* 所以以后我们看标签到底执行那个样式,就先看这个标签有么有直接被选出来 */ p { color: pink; } body { color: red; } /* a链接浏览器默认制定了一个样式 蓝色的 有下划线 a {color: blue;}*/ a { color: green; } </style> </head> <body> <div id="father"> <p>你还是很好看</p> </div> <a href="#">我是单独的样式</a> </body> </html>
<!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>权重的叠加</title> <style> /* 复合选择器会有权重叠加的问题 */ /* 权重虽然会叠加,但是永远不会有进位 */ /* ul li 权重 0,0,0,1 + 0,0,0,1 = 0,0,0,2 2 */ ul li { color: green; } /* li 的权重是 0,0,0,1 1 */ li { color: red; } /* .nav li 权重 0,0,1,0 + 0,0,0,1 = 0,0,1,1 11 */ .nav li { color: pink; } </style> </head> <body> <ul class="nav"> <li>大猪蹄子</li> <li>大肘子</li> <li>猪尾巴</li> </ul> </body> </html>
<!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>CSS权重练习</title> <style> /* .nav li 权重是 11 */ .nav li { color: red; } /* 需求把第一个小li 颜色改为 粉色加粗 ? */ /* .pink 权重是 10 .nav .pink 20 */ .nav .pink { color: pink; font-weight: 700; } </style> </head> <body> <ul class="nav"> <li class="pink">人生四大悲</li> <li>家里没宽带</li> <li>网速不够快</li> <li>手机没流量</li> <li>学校没wifi</li> </ul> </body> </html>
