HTML CSS 类 ID - CSS

CSS（层叠样式表）用于控制HTML元素的样式和布局。在本文中，我们将了解HTML和CSS中的类和ID。

HTML类和id属性

HTML元素可以分配类和ID属性。类属性定义一组元素，而ID属性定义特定元素。

• 类属性 - 用于为一组元素定义样式，以便可以通过类名选择这些元素。
• ID属性 - 用于为单个元素定义样式，以便可以使用ID选择器完全控制元素。

例如，以下HTML代码中，一个div元素具有类属性“container”，而另一个div元素具有ID属性“header”：

<div class="container">
  <div id="header">
    <h1>Welcome to my website</h1>
  </div>
</div>

CSS类选择器

可以使用类选择器选择拥有相同类的所有元素，并对它们应用相同的CSS样式。语法是在类名前加一个点“.”。

例如，以下CSS代码选择具有类“container”的所有div元素，并将它们的背景颜色设置为灰色：

.container {
  background-color: #ccc;
}

CSS ID选择器

可以使用ID选择器选择具有特定ID的元素，并对其应用CSS样式。语法是在ID名前加一个井号“#”。

例如，以下CSS代码选择具有ID“header”的div元素，并设置其背景颜色为白色（#fff）：

#header {
  background-color: #fff;
}

HTML元素+类选择器

可以结合使用HTML元素和类选择器选择要应用CSS样式的元素。例如，以下CSS代码选择所有具有类“menu-item”的ul元素中的所有li元素，并将它们的文本颜色设置为蓝色：

ul.menu-item li {
  color: blue;
}

HTML元素+ID选择器

可以结合使用HTML元素和ID选择器选择要应用CSS样式的元素。例如，以下CSS代码选择具有ID“logo”的img元素，并将其显示为50像素宽：

img#logo {
  width: 50px;
}

总结

HTML和CSS中的类和ID是非常有用的工具，可以帮助您控制文档的样式和布局。了解如何使用类和ID选择器是Web开发中的基础知识。