你关注的才是我正在做的CSS选择器使用优化，前端小伙伴要收藏哦

今天的文章主要来介绍一下前端开发中如何更加优化的使用css选择器

一.合理的避免使用id

通常情况下，id不应该被应用于样式。

id的样式不能被复用并且每个页面中你只能使用一次id。

使用id唯一有效的是确定网页或整个站点的位置。

尽管如此，你应该始终考虑使用class，而不是id，除非只使用一次。

#content .title{

font-size:2em;

}

上面的代码不被推荐使用，代码修改如下：

.content .title{

font-size:2em;

}

二.选择器中避免标签名的出现：

当构建选择器时应该使用清晰，准确和有语义的class（类）名。

不要使用标签选择器，如果你只是关心class（类）名，而不是代码元素，这样会更容易维护。

从分离的角度考虑，在表现层中不应该分配html标记/语义。

它可能是一个有序列表需要被改成一个无序列表，或者一个div将被转换成article。

如果只使用具有实际意义的class（类）名，并且不适用元素选择器，那么你只需要改变html标记，而不用改动css。

div.content>header.content-header>h2.title{

font-size:2em;

}

上面的代码不被推荐使用，代码修改如下：

.content>.content-header>.title{

font-size:2em;

}

三.选择器要尽可能的精确：

如果不写很通用的，需要匹配到DOM末端的选择器 ，首先应该考虑使用直接子集选择器（>）。

下面是一个DOM结构：

News event

Check this out

This is news article content

Buy this

Yey!

下面的css将应用于有title类的全部三个元素。

然后，要解决content类下的title类和teaser类下的title类下不同的样式，这将需要更为精确的选择器再次重写他们的样式。

.content .title{

font-size:2em;

}

上面的代码不被推荐使用，代码修改如下：

.content > .title{

font-size:2em;

}

.conntent > .content-body > .title{

font-size:1.5em;

}

.conntent > .content-body > .taeser > .title{

font-size:1.2em;

}

好了今晚就写到这里祝大家学习的愉快！

诚信互粉！粉笔灰！不做僵尸粉！长期互动！

请点击此处输入图片描述