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{...}

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

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

推荐:css手册

以上就是css 类名相同怎么区分的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读