CSS 选择器-认识并应用选择器

CSS选择器是用来定位HTML或XML文档中的元素的模式。以下是一些常见的CSS选择器，以及对应的样例代码：

1. 标签选择器：选择所有指定标签的元素。

示例代码：

p {
  font-size: 16px;
}

1. 类选择器：选择所有指定类名的元素。

示例代码：

.highlight {
  background-color: yellow;
}

1. ID选择器：选择所有指定ID的元素。

示例代码：

#header {
  height: 100px;
}

1. 属性选择器：选择所有拥有指定属性值的元素。

示例代码：

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

1. 伪类选择器：选择某个状态下的元素，比如鼠标悬停在元素上的状态。

示例代码：

a:hover {
  color: red;
}

1. 子元素选择器：选择指定元素的子元素。

示例代码：

ul li {
  font-weight: bold;
}

1. 相邻兄弟选择器：选择与指定元素相邻的兄弟元素。

示例代码：

h1 + p {
  font-size: 14px;
}

1. 后代选择器：选择指定元素的后代元素。

示例代码：

div p {
  color: blue;
}

交集选择器:

交集选择器表示两个或多个选择器相交的元素。例如，将 h1 和 .class 选择器组合起来，这表示选中所有 class 属性为 "class" 的 h1 元素：

h1.class {
  color: red;
}

并集选择器:

并集选择器选择一组元素中的任意一个，每个选择器用逗号分隔。例如，选择所有 h1 和 p 元素的背景颜色为灰色：

h1, p {
  background-color: gray;
}

css7大常用选择器

1. 元素选择器：使用元素名称作为选择器。

2. 类选择器：使用一个点（.）紧跟着类名作为选择器。

3. ID选择器：使用一个井号（#）紧跟着ID名称作为选择器。

4. 属性选择器：使用方括号[]来选择具有特定属性值的元素。

5. 伪类选择器：使用冒号（:）来选择具有某种状态或特殊行为的元素。

6. 相邻兄弟选择器：使用加号（+）来选择前一个元素的相邻兄弟元素。

7. 后代选择器：使用空格来选择包含在另一个元素内的元素。