CSS 样式来源、选择器和权重
一. 元素样式来源
<!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>元素样式来源</title> </head> <body> <!-- 1.继承样式 --> <style> .a1 { font-size: 40px; color: blue; } </style> <div class="a1"> <p>这是P标签，样式继承div标签a1样式颜色、字号。</p> </div> <!-- 2.默认样式 --> <h2>这是h2标签的默认样式</h2> <h3>这是h3标签的默认样式</h3> <!-- 3.自定义样式 --> <!-- 3.1 行内样式 --> <p style="color: cadetblue; font-size: 30px">这是p标签定义了行内样式</p> <!-- 3.2 文档样式 --> <style> .aa { display: block; width: 600px; font-size: 30px; line-height: 60px; color: white; background-color: darkcyan; border: 1px solid coral; } </style> <p class="aa">这是p标签定义的文档样式</p> <!-- 3.3 外部样式 --> <link rel="stylesheet" href="/style.css" /> <p class="wai">这是p标签定义的外部文档sytle.css样式</p> </body></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>选择器</title> </head> <body> <!-- 1. 标签选择器 --> <style> h2 { color: violet; } </style> <h2>通过标签选择器设置样式</h2> <!-- 2. 属性选择器 --> <style> button[value="2"] { display: block; padding: 15px; font-size: 30px; } </style> <button value="2">通过属性选择器设置样式</button> <!-- 3. 群组选择 --> <ul> <li class="qz1">群组选择1</li> <li class="qz2">群组选择2</li> <li class="qz3">群组选择3</li> </ul> <style> .qz1, .qz2, .qz3 { color: turquoise; } </style> <!-- 4. 通配选择 --> <ul class="tp"> <li class="tp1">通配选择1</li> <li class="tp2">通配选择2</li> <li class="tp3">通配选择3</li> </ul> <style> .tp * { color: rgb(0, 89, 255); font-size: 35px; } </style> <!-- 5. 上下文选择器 --> <!-- 5.1 子元素 --> <div class="z1"> <h2>子元素选择h2</h2> <p>子元素选择p</p> </div> <style> .z1 > h2 { color: tomato; } .z1 > p { font-size: 25px; } </style> <!-- 5.2 后代元素选择 --> <div class="hd"> <div> <p>孙代元素选择</p> <div> <p>从孙代</p> </div> </div> </div> <style> .hd p { color: turquoise; } </style> <!-- 5.3 相邻兄弟元素选择 --> <div> <h1>老大</h1> <h2 class="xlxd">老二相邻的兄弟是老三，往后找最近的兄弟</h2> <h3>老三</h3> <h4>老四</h4> </div> <style> .xlxd + * { font-size: 60px; } </style> <hr /> <!-- 5.4 所有兄弟元素选择 --> <div> <h1>老大</h1> <h2 class="xlxd">老二的所有兄弟是往后找所有的兄弟，因此老大不是</h2> <h3>老三</h3> <h4>老四</h4> </div> <style> .xlxd ~ * { font-size: 60px; } </style> </body></html>
三、选择器的权重
1. 权重比较规则
- 把“id”，“class”，“标签” 看成一个三位数的整数
- “id”为百位数，有 1 个为 1，有 2 个为 2…
- “class”为十位数，有 1 个为 1，有 2 个为 2…
- “标签”为个位数，有 1 个为 1，有 2 个为 2…
- 三位数大的选择器权重大
<!-- 选择器的权重 --><div class="d"><h2 class="css" id="i">选择器的权重</h2></div><style> /* 权重：110 */ .d > #i { color: red; } /* 权重011 */ div > .css { color: sandybrown; } /* 权重111，最大，所以显示该样式 */ div > #i.css { color: skyblue; } /* 权重020 */ .d .css { color: slateblue; }</style>
2. 不推荐用 id 和标签作为选择器
- id 权重太高, 为了让你的代码具有弹性,尽可能用 class。
- 标签数量太少了, 而 class 可以有多种命名，使用方便。
