[分享]css两类名且的关系

在CSS中，有两种类型的选择器，分别是类选择器和ID选择器。这两种选择器都是用来给HTML元素添加样式的。/类选择器/ .classname { color: red; } /ID选择器/ idnam...

在CSS中，有两种类型的选择器，分别是类选择器和ID选择器。这两种选择器都是用来给HTML元素添加样式的。

/*类选择器*/
.classname {
    color: red;
}

/*ID选择器*/
#idname {
    color: blue;
} 

类选择器使用"."符号来引用，而ID选择器则使用"#"符号。它们的作用是为了让我们更方便地给HTML元素设置样式。

它们之间的一个主要区别是，ID选择器只能够被用于给页面上唯一的元素添加样式，而类选择器可以用于多个元素，甚至可以为一个元素添加多个类。

/*一个元素添加多个类*/
<div class="classname1 classname2">Some text here</div> 

此时，样式将会同时应用于具有这些类的所有元素。

在开发一个网站时，我们通常会使用这两种选择器的组合，以达到更好的效果。比如：

<div class="wrap">
   <div class="header"></div>
   <div class="body"></div>
   <div class="footer"></div>
</div> 

在这个简单的布局中，我们可以使用类选择器为这三个元素分别添加样式，而使用ID选择器为整个容器添加样式。

#wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.header {
    height: 100px;
    background-color: #eee;
}

.body {
    height: 500px;
    background-color: #fff;
}

.footer {
    height: 100px;
    background-color: #ddd;
} 

这样，我们就可以轻松地控制整个布局的样式，让网站看起来更加美观、舒适。