选择器 CSS 示例 - CSS

CSS选择器是用于指定要样式化的元素的一种方法。它可以根据元素的类型，状态，属性等来选择元素。

下面是一些CSS选择器的示例：

元素选择器

元素选择器是根据元素的名称来选择元素的。

例如，要选择所有段落元素（p）并将其文本颜色设置为红色，可以使用以下样式：

p {
  color: red;
}

ID选择器

ID选择器是根据元素的ID属性来选择元素的。

例如，要选择ID为my-id的元素并将其文本颜色设置为绿色，可以使用以下样式：

#my-id {
  color: green;
}

类选择器

类选择器是根据元素的类属性来选择元素的。

例如，要选择类为my-class的所有元素并将它们的文本颜色设置为蓝色，可以使用以下样式：

.my-class {
  color: blue;
}

属性选择器

属性选择器是根据元素的属性来选择元素的。

例如，要选择所有具有data-info属性的元素并将其文本颜色设置为紫色，可以使用以下样式：

[data-info] {
  color: purple;
}

子元素选择器

子元素选择器是选择元素的子元素的选择器。

例如，要选择元素div内部的所有p元素并将其文本颜色设置为黄色，可以使用以下样式：

div > p {
  color: yellow;
}

相邻兄弟选择器

相邻兄弟选择器是选择与指定元素相邻的兄弟元素的选择器。

例如，要选择元素p后面的第一个div元素并将其文本颜色设置为橙色，可以使用以下样式：

p + div {
  color: orange;
}

通用兄弟选择器

通用兄弟选择器是选择指定元素后面的所有兄弟元素的选择器。

例如，要选择元素p后面的所有div元素并将其文本颜色设置为粉色，可以使用以下样式：

p ~ div {
  color: pink;
}

以上就是一些常见的CSS选择器示例，你可以根据需要使用这些选择器来选择并样式化你的网页元素。