前端开发入门之【选择器详解】：常用CSS选择器通俗讲解

以下是几种常见的选择器：

1. 元素选择器

• 作用：选中所有指定类型的元素。
• 例子：p 选中所有 <p> 标签（段落）。
• 代码：

  p {
    color: red;
  }
  

• 解释：这段代码会让网页上所有的段落文字变成红色。

2. 类选择器

• 作用：选中所有带有指定类名的元素。
• 例子：.my-class 选中所有 class="my-class" 的元素。
• 代码：

  .my-class {
    font-size: 20px;
  }
  

• 解释：这段代码会让所有带有 class="my-class" 的元素字体大小变成 20px。

3. ID 选择器

• 作用：选中指定 ID 的元素（ID 是唯一的，一个页面中通常只有一个）。
• 例子：#my-id 选中 id="my-id" 的元素。
• 代码：

  #my-id {
    background-color: yellow;
  }
  

• 解释：这段代码会让 id="my-id" 的元素背景变成黄色。

4. 后代选择器

• 作用：选中某个元素内部的指定后代元素。
• 例子：div p 选中所有在 <div> 内部的 <p> 元素。
• 代码：

  div p {
    color: blue;
  }
  

• 解释：这段代码会让所有在 <div> 内部的段落文字变成蓝色。

5. 子元素选择器

• 作用：选中某个元素的直接子元素。
• 例子：ul > li 选中所有 <ul> 的直接子元素 <li>。
• 代码：

  ul > li {
    list-style: none;
  }
  

• 解释：这段代码会让所有 <ul> 的直接子元素 <li> 去掉默认的列表符号。

6. 伪类选择器

• 作用：选中元素的某种状态或特定位置。
• 例子：:hover 选中鼠标悬停时的元素，:nth-child(2) 选中某个父元素的第二个子元素。
• 代码：

  a:hover {
    color: green;
  }
  

• 解释：这段代码会让所有链接在鼠标悬停时变成绿色。

7. 属性选择器

• 作用：选中带有指定属性的元素。
• 例子：[type="text"] 选中所有 type="text" 的元素。
• 代码：

  [type="text"] {
    border: 1px solid black;
  }
  

• 解释：这段代码会让所有 type="text" 的输入框边框变成黑色。

8. 通配符选择器

• 作用：选中页面上的所有元素。
• 例子：* 选中所有元素。
• 代码：

  * {
    margin: 0;
    padding: 0;
  }
  

• 解释：这段代码会让所有元素的外边距和内边距都变成 0。

总结

• 元素选择器：选中所有指定标签的元素。
• 类选择器：选中所有指定类名的元素。
• ID 选择器：选中指定 ID 的元素。
• 后代选择器：选中某个元素内部的后代元素。
• 子元素选择器：选中某个元素的直接子元素。
• 伪类选择器：选中元素的某种状态或特定位置。
• 属性选择器：选中带有指定属性的元素。
• 通配符选择器：选中所有元素。

这些选择器是前端开发中最常用的工具，掌握它们可以帮助你更好地控制网页的样式和布局。希望这些解释对你有帮助！如果有其他问题，随时问我哦！