CSS有哪些选择器？

  CSS（层叠样式表）中有多种选择器，用于选择要应用样式的特定元素或元素组合。

1. 元素选择器（Element Selector）

• 通过元素名称选择元素，例如 p 选择所有 < p > 元素。

p {
  color: blue;
}

  上述示例中，将选择所有 < p > 元素，并将文本颜色设置为蓝色。

2. 类选择器（Class Selector）

• 通过类名选择元素，以点号（.）开头，例如 .my-class 选择具有 my-class 类的元素。

.my-class {
  font-weight: bold;
}

  上述示例中，将选择所有具有 my-class 类的元素，并将字体加粗。

3. ID选择器（ID Selector）

• 通过元素的唯一ID选择元素，以井号（#）开头，例如 #my-id 选择具有 my-id ID的元素。

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

  上述示例中，将选择具有 my-id ID的元素，并将背景颜色设置为黄色。

4. 属性选择器（Attribute Selector）

• 通过元素的属性选择元素，例如 [type=“text”] 选择具有 type 属性值为 “text” 的元素。

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

  上述示例中，将选择所有 type 属性值为 “text” 的 < input > 元素，并设置边框样式。

5. 后代选择器（Descendant Selector）

• 选择特定元素的后代元素，使用空格分隔，例如 ul li 选择 < ul > 元素内的所有< li >元素

ul li {
  list-style-type: square;
}

  上述示例中，将选择所有 < ul > 元素内的所有 < li > 元素，并将列表样式设置为方块。

6. 子元素选择器（Child Selector）

• 选择特定元素的直接子元素，使用大于号（>）分隔，例如 ul > li 选择 < ul > 元素的直接子元素 < li >。

ul > li {
  margin-left: 20px;
}

  上述示例中，将选择 < ul > 元素的直接子元素 < li >，并设置左边距为20像素。

7. 相邻兄弟选择器（Adjacent Sibling Selector）

• 选择紧接在另一个元素后面的元素，使用加号（+）分隔，例如 h2 + p 选择紧接在 < h2 > 元素后的 < p > 元素。

h2 + p {
  font-size: 18px;
}

  上述示例中，将选择紧接在 < h2 > 元素后的 < p > 元素，并将字体大小设置为18像素。

8. 通用选择器（Universal Selector）

• 选择所有元素，使用星号（*），例如 * 选择文档中的所有元素。

* {
  margin: 0;
  padding: 0;
}

  上述示例中，将选择文档中的所有元素，并将外边距和内边距都设置为0。

9. 伪类选择器

• 当使用CSS时，伪类选择器用于选择元素的特定状态或位置。它们以冒号（:）开头，并添加到选择器的末尾。

1. :hover（悬停状态）：

a:hover {
  color: red;
}

  上述示例中，当鼠标悬停在链接上时，链接的文本颜色将变为红色。

2. :active（激活状态）：

button:active {
  background-color: gray;
}

  上述示例中，当按钮被按下时，按钮的背景颜色将变为灰色。

3. :focus（焦点状态）：

input:focus {
  border: 1px solid blue;
}

  上述示例中，当输入框获取焦点时，输入框的边框将变为蓝色

4. :first-child（第一个子元素）：

ul li:first-child {
  font-weight: bold;
}

  上述示例中，选择 < ul > 元素中的第一个 < li > 元素，并将字体加粗。

5. :last-child（最后一个子元素）：

ul li:last-child {
  color: green;
}

  上述示例中，选择 < ul > 元素中的最后一个 < li > 元素，并将文本颜色设置为绿色。

6. :nth-child(n)（第 n 个子元素）：

ul li:nth-child(odd) {
  background-color: lightgray;
}

  上述示例中，选择 < ul > 元素中的奇数位置的 < li > 元素，并设置背景颜色为浅灰色。

原文地址：https://blog.csdn.net/alive_new/article/details/136775016

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！