css 类名相同怎么区分

css 类名相同怎么区分

css类名相同，我们可以使用后代选择器、子代选择器来进行区分，因为元素的父级元素或再上一级元素的类名是不同的。

在做网页时，经常会给元素起类名，比如文章标题可以取为title，公告标题也可以取名为title，那如何区分，为它们编写不同的样式呢？

例子：

<div class="div1">
    <h3 class="title"></h3>
</div>
<div class="div2">
    <h3 class="title"></h3>
</div>

1、通过后代选择器选择元素

a) css选择第一个类名为title的元素

.div1 .title{...}

b) css选择第二个类名为title的元素

.div2 .title{...}

这样，相同类名的元素就可以进行区分了。

2、通过子代选择器选择元素

a) css选择第一个类名为title的元素

.div1 > .title{...}

b) css选择第二个类名为title的元素

.div2 > .title{...}

同样的，也可以区分相同类名的元素。

技巧就是利用了相同类名元素的父元素类名不同来进行区分。