[分享]css中class选择器的语法

CSS中的class选择器允许我们使用特定的类名来选择HTML元素，从而对其应用样式。class选择器的语法很简单，只需在选择器前加上一个点 "."，紧接着写上类名即可。 // 语...

CSS中的class选择器允许我们使用特定的类名来选择HTML元素，从而对其应用样式。class选择器的语法很简单，只需在选择器前加上一个点 "."，紧接着写上类名即可。

// 语法示例
.className {
  property: value;
} 

例如，我们可以定义一个类名为"button"的样式规则，它会对所有带有class="button"的HTML元素进行样式修改。

// 类名为"button"的样式
.button {
  background-color: #FDA301;
  color: #fff;
  font-size: 16px;
  border: 2px solid #FDA301;
  padding: 10px 20px;
  cursor: pointer;
} 

除了单个类名选择器，我们也可以使用多个类名选择器，来匹配HTML元素。

// 多个类名选择器示例
.btn-primary {
  background-color: #007BFF;
  color: #fff;
  font-size: 16px;
  border: 2px solid #007BFF;
  padding: 10px 20px;
}

.btn-lg {
  font-size: 24px;
  padding: 20px 40px;
}

// 同时使用多个类名选择器
<div class="button btn-primary btn-lg">Click me</div> 

在上述代码中，我们定义了两个类名选择器，分别是".btn-primary"和".btn-lg"。然后我们在HTML元素中使用了三个类名："button"、"btn-primary"和"btn-lg"，这样我们就可以同时使用多个类名选择器来对元素进行样式修改了。

总之，class选择器是CSS中基础的选择器之一，它可以帮助我们更方便地对HTML元素进行样式修改。我们只需要在HTML元素上添加一个class，然后在CSS文件中定义相应的样式规则即可。