CSS选择器精准控制元素样式的方法

CSS选择器是前端开发中精准控制元素样式的关键工具。以下是几种主要的精准控制方法：

1. 基本选择器

• 元素选择器：p { color: red; } - 选择所有<p>元素
• 类选择器：.warning { color: yellow; } - 选择所有class包含"warning"的元素
• ID选择器：#header { height: 100px; } - 选择id为"header"的元素

2. 组合选择器

• 后代选择器：div p { color: blue; } - 选择div内的所有p元素
• 子元素选择器：ul > li { list-style: none; } - 只选择ul的直接子元素li
• 相邻兄弟选择器：h1 + p { margin-top: 0; } - 选择紧接在h1后的p元素
• 通用兄弟选择器：h2 ~ p { color: green; } - 选择h2之后的所有同级p元素

3. 属性选择器

• [type="text"] { border: 1px solid #ccc; } - 选择type属性为text的元素
• [href^="https"] - 选择href属性以"https"开头的元素
• [href$=".pdf"] - 选择href属性以".pdf"结尾的元素
• [class*="btn"] - 选择class属性包含"btn"的元素

4. 伪类选择器

• a:hover { color: orange; } - 鼠标悬停时的样式
• li:nth-child(odd) - 选择奇数位置的li元素
• input:focus - 选择获得焦点的输入元素
• :not(.hidden) - 选择不包含hidden类的元素

5. 伪元素选择器

• p::first-line - 选择p元素的第一行
• p::first-letter - 选择p元素的首字母
• ::before 和 ::after - 在元素前后插入内容

精准控制技巧

1. 特异性原则：ID > 类/属性/伪类 > 元素/伪元素
2. !important：color: red !important; (慎用)
3. 层叠顺序：后定义的样式会覆盖前面的相同特异性样式
4. 命名空间：使用BEM等命名规范提高可维护性
5. CSS变量：:root { --main-color: #06c; } 然后 color: var(--main-color);

通过合理组合这些选择器和方法，可以实现对页面元素的精准样式控制。