别再乱写 style 了！CSS 选择器才是正道

金金金上线！

话不多，只讲你能听懂的前端知识

什么是 CSS 选择器？

简而言之：CSS选择器是找到并应用样式的工具。它让你能够精准地控制网页上的每一个元素

常见的 CSS 选择器有哪些？

选择器	是干啥的
元素选择器（如 `p`）	根据标签名选择所有该类型的元素
类选择器（如 `.highlight`）	根据类名选择元素
ID选择器（如 `#header`）	根据ID选择唯一一个元素
子选择器（如 `div > p`）	仅当元素是另一个特定元素的直接子元素时匹配
后代选择器（如 `div p`）	只要元素位于另一元素内部，不论层级深浅都匹配
属性选择器（如 `input[type="text"]`）	根据元素的属性及其值来选择元素
伪类选择器（如 `a:hover`）	定义元素处于特殊状态下的样式

为啥要用 CSS 选择器？

html 复制代码

1. 精准控制页面样式
    - 通过不同的选择器可以精确地控制每个元素的样式，无需依赖过多的内联样式或不必要的类名。
2. 提高代码复用性和维护性
    - 使用类选择器等高级选择器可以减少重复代码，使得维护起来更加容易。
3. 实现复杂的布局与交互效果
    - 例如，利用伪类选择器可以轻松实现鼠标悬停效果、表单验证提示等动态交互。

语义化标签的最佳实践

优先使用简单选择器
- 尽可能使用简单的选择器，比如元素选择器或类选择器，避免过度复杂的选择器链，这有助于提高性能
css 复制代码
```
/* 正确 */ 
.highlight { 
    background-color: yellow; 
} 
/* 避免 */ 
.container .content .text .highlight { 
    background-color: yellow; 
}
```

合理运用伪类选择器

伪类选择器非常适合处理交互状态，比如鼠标悬停、点击、访问过的链接等。

css 复制代码

/* 鼠标悬停时下划线 */ 
a:hover { 
    text-decoration: underline; 
}
/* 获得焦点时边框变化 */
button:focus { 
    outline: none; border: 2px solid blue; 
}

善用属性选择器

属性选择器可以根据元素的属性和属性值来选择元素，非常适合用于表单验证等场景

css 复制代码

/* 所有文本输入框 */ 
input[type="text"] { 
    border: 1px solid #ccc; 
} 
/* 禁用按钮 */
input[type="submit"]:disabled { 
    background-color: grey; 
}

注意选择器优先级
- 不同选择器有不同的优先级，理解这一点对于解决样式覆盖问题非常重要

选择器优先级

CSS 优先级规则分为五个级别，从高到低分别为：

记住这个"权力金字塔"，从顶到底：

!important 👑（最大外挂，慎用！）
内联样式：style="..."（写在标签里的）
ID 选择器：#header
类 / 属性 / 伪类：.nav、[type]、:hover
标签 / 伪元素：div、p、::before
继承样式：比如 color 从爸爸那里"遗传"来的
浏览器默认样式：最底层，最容易被覆盖

✅ 注意：!important 谁加谁赢，但如果都加了，那就看谁写在后面。

权重

每种选择器根据其类型分配一个权重。权重计算方法如下：

选择器	特异性值
`style="color:red"`	`(1,0,0,0)`
`#app`	`(0,1,0,0)`
`.nav .logo`	`(0,0,2,0)`
`div p span`	`(0,0,0,3)`
`#app .nav p`	`(0,1,1,1)`

📌 比较规则：从左到右，逐位对比，不进位 。

就像比身份证号，第一位大就赢，不管后面多大。

选择器符号有优先级吗？比如 >、+、~

后代、子代、兄弟选择器本身没有权重！

（空格）：后代
>：子元素
+：紧邻兄弟
~：通用兄弟

这些符号只是"连接工具"，真正决定优先级的，是它们两边的选择器类型。

✅ 举个例子：

CSS 复制代码

/* 这两个优先级一样，都是 (0,0,1,1) */
.sidebar .title { 
    color: red; 
}
.sidebar > .title { 
    color: blue; 
}

谁生效？👉 写在后面的赢！

一句话总结

!important 最牛，行内其次，
ID 一个顶十个类，
类再多也不如一个 ID，
都一样？谁写在后面谁赢！

嘻嘻

CSS 不是玄学（其实还是挺玄学的手动狗头=-=），
优先级一清，bug 少一半

别再为找不到合适的元素而烦恼了！

掌握CSS选择器，让样式随心所欲！

编写有误还请各位指正，万分感谢。