CSS网页开发中的建议(写给我自己的吗,傻瓜,你也可以看呀)

这些建议都是我在网页开发中的总结和经验,没有顺序之分,看需要的就好。在往后的网页开发中有新的好的总结和经验也会提炼到这篇文章,所以建议收藏,当然也不要忘了点赞和关注哟~

一、CSS选择器建议:

为什么不用class呢,要用CSS选择器呢?

我想应该有很多小伙伴有重重的疑问的,我为什么不用class呢,要用CSS选择器呢?这样说吧,通常我们开发网页中一个父级是有很多子级的,你不可能给每一个子级都加上class,而且选择器的使用会让我们更加灵活,但是长的class名让我们增加了可读和维护性的同时确是会消耗性能。

1.选择器指定最后一个子级不要使用:last-child

在子级不多的情况下不要使用last-child去选择父元素最后一个子级,而改用 nth-child(n) 代替,因为最后一个子级经常需要扩展其他子级,如果你一开始就把它定义为最后一个父类子级,那么后面你需要扩展其他子级元素再去改动元素是很麻烦的(如果层级还特别多,那么头更大),用nth-child(n)有利于扩展,因为n里填上对应的子级层级数就好了,后面以此类推。

这时有人可能会问了那first-child可以吗?是可以的因为它是选择第一个元素,第一个一般都是比较清晰的信息所以几乎很少去改动它。

2.选择器既要指定父类层级也要指定子类层级

使用CSS选择器指定不管是子级还是父级一定要指定当前的层级,不要因为它现在还没层级就不用,竟然你使用了选择器那么它的范围是你父类里的所有子类,例如:div里现在有一个p元素,你直接指定p,

div p{}

那么它的范围就是当前div里所有p元素,后面还是那个问题你去改动或者去扩展多一个那就非常麻烦了,老要回头改前面的选择器的指定层级,你不得崩溃,选择器开始一时爽,层级嵌套太多你就知道多费功夫了。(不管你后面还有没有层级,你都得指定它父类的层级以及它的子级)

div:first-child p:first-child /* 第一个div里的第一个p */

(总结上面使用选择器建议是为了更好维护和扩展)

猜你喜欢

转载自blog.csdn.net/A_hxy/article/details/106632697
今日推荐