[分享]css中id和class的原理

在CSS中，id和class都是用来给HTML元素添加样式的属性。他们的主要区别在于用法和作用。id是元素的唯一标识符，一个HTML文档中只能存在一个相同的id值。id的命名规则是以字母、下划线或连字...

在CSS中，id和class都是用来给HTML元素添加样式的属性。他们的主要区别在于用法和作用。

id是元素的唯一标识符，一个HTML文档中只能存在一个相同的id值。id的命名规则是以字母、下划线或连字符开头的字符串，后面可以跟字母、数字、下划线或连字符，例如：#header、#nav、#content等。使用id选择器可以直接选择该元素，并应用样式。

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

class则是一种通用的标识符，可以用在多个元素上。class的命名规则和id类似，但可以重复使用。例如：.red、.blue、.bold等。使用class选择器可以选择具有该类标识符的所有元素，并应用样式。

.red {
    color: red;
}
.blue {
    color: blue;
}
.bold {
    font-weight: bold;
} 

id和class可以结合使用，以便更精确地选取元素并应用样式。

#header .nav a{
    color: #fff;
    text-decoration: none;
} 

id和class的原理在于HTML元素本身就是有标识符的，而id和class就是为了更方便地选择这些元素并添加样式。在写CSS时，要注意不要滥用id选择器，避免出现选择器权重的问题；而class选择器则更具灵活性。