[分享]css两个名字一样的类

在CSS中，如果有两个名字一样的类，浏览器会如何处理呢？

 .example {
        background-color: red;
    }
    .example {
        background-color: blue;
    } 

以上代码中，我们定义了两个名字一样的类，它们都设置了不同的背景色。但由于它们的名字一样，浏览器会优先应用后面的样式（也就是背景色为蓝色）。

这也是为什么在编写CSS时，要尽量避免使用相同的名字来定义类。如果必须要使用相同的名字，可以使用特殊的选择器来指定应该应用哪个样式，比如：

 .example:first-of-type {
        background-color: red;
    }
    .example:last-of-type {
        background-color: blue;
    } 

以上代码中，我们使用了:first-of-type和:last-of-type选择器来区分不同的类，并分别为它们设置了不同的背景色。这样，即使它们的名字一样，浏览器也能正确地渲染页面。