Menu
CoddyTech

类选择器

Coddy CSS 选择器 课程的第 4 课,共 15 课。

类选择器是一种 CSS 选择器,用于选择具有特定类属性的元素。类属性是一种自定义属性,你可以添加到 HTML 元素中,将它们组合在一起。

要选择具有特定类的元素,可以使用句点(.)后跟类名。例如,选择器 .my-class 会选择所有具有 my-class 类的元素。

下面是使用类选择器设置网页样式的示例:

.my-class {
  color: red;
  font-size: 2em;
}

要为元素添加类,请写入:

<div class="my-class"></div>

这条 CSS 规则会将所有具有 my-class 类的元素设置为红色,并将字体大小设为 2em。

challenge icon

挑战

简单
  • 创建一个包含三个 h1 元素的网页。
  • 为第一个 h1 元素添加一个类。
  • 为第二个 h1 元素添加另一个类。
  • 使用 CSS 类选择器将第一个 h1 元素的样式设为红色  ,并将字体大小设为 64px。
  • 使用另一个 CSS 类选择器将另一个 h1 元素的样式设为蓝色  ,并将字体大小设为 32px。

亲手试试

<html>
<head>
  <title>Class Selector Exercise</title>
  <style>
    /* CSS Code goes here */
  </style>
</head>
<body>
  
</body>
</html>

CSS 选择器中的所有课

自己练习: Web 在线编辑器