如何影响 CSS 中的不同元素

在 CSS 中，可以通过选择器来影响不同的元素，同时也可以使用不同的属性和值来改变元素的样式。

选择器

有许多种选择器可用于选择不同的元素。以下是一些常见的选择器：

• 元素选择器：使用元素的名称来选择元素，如 p、div。
• 类选择器：使用类名来选择元素，如 .my-class。
• ID 选择器：使用 ID 名称来选择元素，如 #my-id。
• 属性选择器：使用元素的属性值来选择元素，如 [type="text"]。
• 伪类选择器：用于选择元素的特定状态，如 :hover、:visited。

可以将这些选择器组合在一起，以实现更精细的选择。

属性

CSS 中有许多可用属性，可以控制元素的不同方面，如颜色、大小、位置等等。以下是一些常见的属性：

• color：控制文本的颜色。
• font-size：控制文本的大小。
• background-color：控制元素的背景颜色。
• width 和 height：控制元素的宽度和高度。
• margin 和 padding：控制元素周围的间距。
• border：控制元素的边框。

可以将这些属性和值组合在一起，以实现更丰富的样式。

示例代码

/* 选择所有段落元素 */
p {
  font-size: 16px;
  color: red;
}

/* 选择所有 class 为 "my-class" 的元素 */
.my-class {
  background-color: blue;
  border: 1px solid black;
}

/* 选择 ID 为 "my-id" 的元素 */
#my-id {
  width: 100px;
  height: 100px;
}

/* 选择所有包含 "example" 的元素 */
[data-example="true"] {
  margin-top: 10px;
  margin-bottom: 10px;
}

/* 选择所有链接元素，当鼠标悬停时改变颜色 */
a:hover {
  color: green;
}

以上是一些常见的选择器和属性，但远不是全部。可以查阅相关文档，了解更多内容。