css选择器的用法：CSS选择器全解析，从基础到进阶

基础选择器

1. 元素选择器
   最简单的选择器是元素选择器，它通过HTML标签名选择元素。

   p { color: red; } /* 选择所有段落元素 */

2. 类选择器
   通过元素的class属性选择元素，使用点号（）表示。

   .highlight { background-color: yellow; }

3. ID选择器
   通过元素的id属性选择元素，使用井号（）表示。

   #header { font-size: 24px; }

4. 通配符选择器
   使用选择所有元素，常用于重置样式。

   * { margin: 0; padding: 0; }

组合选择器

1. 后代选择器
   选择某个元素的所有后代元素，使用空格分隔。

   nav a { color: blue; } /* 选择导航栏中的所有链接 */

2. 子选择器
   选择某个元素的直接子元素，使用>符号。

   ul > li { list-style: square; } /* 选择无序列表的直接子元素 */

3. 相邻兄弟选择器
   选择紧接在另一个元素后的元素，使用符号。

   h1 + p { font-weight: bold; } /* 选择紧跟在h1后的段落 */

4. 一般兄弟选择器
   选择所有在另一个元素之后的兄弟元素，使用符号。

   .intro ~ p { color: green; } /* 选择所有在.intro之后的段落 */

伪类选择器

伪类选择器用于选择具有特定状态或位置的元素。

1. :hover
   选择鼠标悬停的元素。

   a:hover { text-decoration: underline; }

2. :focus
   选择获得焦点的元素，常用于表单元素。

   input:focus { outline: none; }

3. :nth-child(n)
   选择父元素中的第n个子元素。

   .item:nth-child(2) { background: red; } /* 选择每个.item中的第二个元素 */

4. :not(selector)
   排除某些元素。

   p:not(.highlight) { color: black; } /* 选择所有没有.highlight类的段落 */

伪元素选择器

伪元素选择器用于选择元素的特定部分,如第一个字符或装饰性内容。

1. ::before
   在元素内容前插入内容。

   .section::before { content: "•"; }

2. ::after
   在元素内容后插入内容。

   .quote::after { content: """;

3. ::first-letter
   选择元素的第一个字母。

   p::first-letter { font-size: 24px; }

属性选择器

属性选择器通过元素的属性选择元素。

1. [attr]
   选择具有指定属性的元素。

   [lang="en"] { font-family: Arial; }

2. [attr=value]
   选择属性值等于指定值的元素。

   input[type="text"] { width: 100%; }

3. [attr^=value]
   选择属性值以指定值开头的元素。

   a[href^="https"] { color: blue; }

使用建议

1. 优先级
   CSS选择器的优先级从高到低为：ID选择器 > 类选择器 > 元素选择器 > 通配符选择器。

   #header h1 { /* ID优先级高于h1 */ }

2. 避免过度嵌套
   过度嵌套的选择器会降低性能，尽量保持简洁。

3. 使用BEM命名法
   BEM（Block Element Modifier）是一种命名约定，能有效减少选择器的冲突。