基本选择器：
1. Universal Selector（通用选择器）:
* {
/* 应用于所有元素 */
}
2. Type Selector（类型选择器）:
p {
/* 应用于所有段落元素 */
}
3. Class Selector（类选择器）:
.example {
/* 应用于所有类名为example的元素 */
}
4. ID Selector（ID选择器）:
#header {
/* 应用于所有ID为header的元素 */
}
层次选择器：
5. Descendant Selector（后代选择器）:
article p {
/* 应用于article元素下的所有段落元素 */
}
6. Child Selector（子元素选择器）:
section > p {
/* 应用于section元素下的直接子元素是段落的元素 */
}
7. Adjacent Sibling Selector（相邻兄弟选择器）:
h2 + p {
/* 应用于紧接在h2元素后面的段落元素 */
}
8. General Sibling Selector（兄弟选择器）:
h2 ~ p {
/* 应用于h2元素后面的所有兄弟段落元素 */
}
属性选择器：
9. Attribute Selector（属性选择器）:
input[type="text"] {
/* 应用于所有type属性为text的input元素 */
}
10. Attribute Starts With Selector（属性值以某字符串开始的选择器）:
a[href^="https"] {
/* 应用于href属性以https开头的所有链接元素 */
}
11. Attribute Ends With Selector（属性值以某字符串结束的选择器）:
a[href$=".pdf"] {
/* 应用于href属性以.pdf结尾的所有链接元素 */
}
12. Attribute Contains Selector（属性值包含某字符串的选择器）:
a[href*="example"] {
/* 应用于href属性包含"example"的所有链接元素 */
}
伪类和伪元素选择器：
13. :hover 伪类：
a:hover {
/* 鼠标悬停时应用的样式 */
}
14. :nth-child 伪类：
li:nth-child(odd) {
/* 应用于所有奇数位置的li元素 */
}
15. :not 伪类：
p:not(.special) {
/* 应用于不含有特定类的所有段落元素 */
}
16. ::before 伪元素：
p::before {
/* 在每个段落前插入内容 */
content: "前缀";
}
CSS优先级要点：
- ID选择器优先级最高： ID选择器的权重最高，它会覆盖其他选择器。
- 内联样式优先级高于其他样式： 直接在HTML元素上使用style属性的样式优先级高于外部样式表的样式。
- 通用选择器权重最低： 通用选择器的权重较低，容易被其他选择器覆盖。
- !important 规则： 使用 !important 规则可以覆盖其他样式，但应慎用，因为它会增加样式表的维护难度。
在实际开发中，理解这些选择器和优先级的原则，有助于更有效地管理和调整样式。优先使用更具体的选择器，避免过度使用!important，以确保样式表的可维护性。
转载请注明出处：http://www.zyzy.cn/article/detail/4068/CSS