CSS 选择器与优先级：揭秘谁才是“老大”

你是不是常常在写 CSS 时，觉得自己像在操控一个小型宫斗剧？各路选择器纷纷上线，争相抢占样式的 "C 位"，而我们这些“编剧”有时候也会一脸懵：到底谁的优先级高？究竟谁能继承我的“家业”？别急，今天这篇文章就带你看看这场 “选美大赛” 的规则，搞清楚谁才是真正的“老大”！

一、CSS选择器阵容——都来报个到！

首先，咱得认识这些“参赛选手”。来来来，排队！

1. 标签选择器（Element Selector）
   简单粗暴，指定标签就行：div {}，p {}，像是个“万金油”选手，适配各种页面。

2. 类选择器（Class Selector）
   特点：class="good-looking"，带个小点点 .class {}，它就像你的个性签名，给元素打个标签，说“这哥们儿不错”。

3. ID选择器（ID Selector）
   看名字就知道了，ID 啊！唯一身份象征：#only-one {}，就这一个，走哪儿都是焦点。

4. 属性选择器（Attribute Selector）
   比较文艺，有点小讲究，像“嗅探器”，专找带特定属性的标签：[type="password"] {}。你要是不小心给了某个输入框 type=password，它就锁定了！

5. 伪类选择器（Pseudo-class Selector）
   看不见摸不着，但很灵活，像个影子。a:hover {} 这种让你鼠标一飘过，样式就跟着飘动。

6. 伪元素选择器（Pseudo-element Selector）
   擅长 “扮演双重身份”：比如 ::before 和 ::after，干些“偷偷加内容”的活，帮你在元素前后插点小装饰。

7. 组合选择器（组合技选手）
   一旦组合，那威力可翻倍！比如：

   • 子元素选择器：div > p {} 父控子，娃只能听爸爸的。
   • 后代选择器：div p {} 家族关系，随便哪代的孙子都听爷爷的。
   • 兄弟选择器：h1 + p {} 亲兄弟，连着的，帮衬下手。

二、CSS优先级大乱斗：谁是 "大哥大"？

CSS 优先级就像积分排名，谁分高，谁的样式说了算。每个选择器都有自己的“积分”，咱们给大家排个名次：

1. 内联样式（style 属性）：地表最强，谁敢动他？优先级：1000分。
   示例：<div style="color: red;">

2. ID 选择器：仅次于内联，900分的“老二”地位无人撼动：#my-id {}

3. 类选择器、伪类、属性选择器：中坚力量，100分。像个很努力但还没到巅峰的好青年：.my-class, a:hover, [type="text"]

4. 标签选择器：常规力量，1分的忠实“底层劳动力”了：div {}

5. 通配符选择器：* {}，光脚的不怕穿鞋的，永远“吊车尾”，但可以暗中发力。

注：重要声明！ !important 是 CSS 世界的 “禁术”，如果你用了它，那它直接破格登顶，不管别人优先级多高，统统无效。

优先级趣味口诀：

“行内独一，类兄接一，元素小兵，通配最轻”。简直是宫斗剧啊，等级分明！

三、哪些属性可以继承？"谁家的孩子听话？"

CSS 中，部分属性是“天生乖宝宝”，会乖乖地“继承”父母的样式；而有些则特立独行，说啥也不管。

可以继承的乖宝宝们：

• 字体家族：font-family，不管三代同堂，字体家族代代相传。
• 字体大小：font-size，爷爷有多大，孙子也不会太小。
• 颜色：color，你说是红的，底下的都跟着红。
• 行高：line-height，保持全家统一的排版美感。
• 文本对齐：text-align，一家人看同一个方向。

不会继承的特立独行派：

• 背景相关：background 啊，怎么着都得自己定义吧，毕竟每个人家都有自己的背景。
• 盒子模型属性：margin, padding，尺寸什么的得自己搞，不跟风。
• 边框：border，别人的边框跟我没啥关系，我自己画。

四、写 CSS 如同写宫斗剧的彩蛋

你看，CSS 优先级就像个“谁是老大”的小社会，而选择器就是里面各路争斗的小角色。写 CSS，就跟写剧本一样，有些地方你得给他们“开后门”，比如 !important 直接“篡位”；有些地方你得设定家族属性，继承文化。