美文网首页
css选择器平时开发关于id选择器和类选择器的选择的思考

css选择器平时开发关于id选择器和类选择器的选择的思考

作者: mudssky | 来源:发表于2021-04-07 10:36 被阅读0次

css中有三种基础的选择器,标签选择器,类选择器和id选择器。

其中标签选择器选择的范围比较广,而类选择器和id选择器是可以精确定位的。

今天我才开始思考id选择器和类选择器各自的使用场景,为什么我们开发中应该多用类选择器,少用id选择器呢?
id选择器具有唯一性,不能出现重复的id,重复的情况下虽然对css样式没有什么影响,但是可能影响你的js代码。document.getElementById 会怎么执行?
类选择器可以重复使用,具有一定的可复用性。而且一个标签可以添加多个类。

从上面的描述中我们也能看出该怎么选择了。

id选择器太死板了,因为一个标签只能有一个id,你的css代码就都堆在一块,后面你要修改维护的时候也要改这一大块代码,你要加功能的时候也是改这一大块代码。明显不便于维护。
id选择器唯一的特性,可以用于精确选取dom元素,所以我们把他留给js使用。
用类选择器的话,可以把一个标签的css进行拆分,把可以复用的地方拆分出来就可以减少代码量了。后期维护的时候加新功能加一个类就行了。所以肯定主要是用类选择器来设置样式的。
id选择器干脆就不要用了,只在用js选择dom之类的情况下使用,因为id选择器的权重和类选择器不同,大一级。混用可能会增加因为这个权重产生的问题。所以干脆就少用或不用。

相关文章

  • CSS 选择器

    CSS选择器的概念 标签选择器 类选择器 ID选择器 类选择器与ID选择器的区别 子代选择器 后代选择器 子选择器...

  • CSS选择器

    CSS 元素选择器CSS 选择器分组CSS 类选择器详解CSS ID 选择器详解CSS 属性选择器详解CSS 后代...

  • react 开发实战

    CSS:选择器用法:.类名 //类选择器 id名 //id 选择器 .类名 元素名 //后代选择器,包含子元素和子...

  • day003_css基础

    css 标签选择器 id选择器 类选择器(开发使用) css 链接方式 1、内嵌式(head标签内...

  • css选择器平时开发关于id选择器和类选择器的选择的思考

    css中有三种基础的选择器,标签选择器,类选择器和id选择器。 其中标签选择器选择的范围比较广,而类选择器和id选...

  • css2选择器,盒模型

    1、css选择器 标签选择器 id选择器 类选择器 层级选择器 组选择器 伪类选择器 2、css盒模型 设置边框 ...

  • css选择器有哪些

    关于css属性选择器常用的有: 1.普通选择器 id选择器(#box),选择id为box的元素 类选择器(.one...

  • 类选择器 ID选择器 后代选择器 子元素选择器 交集选择器 并集

    一、类选择器.类选器名称{css样式代码;} 二、ID选择器。 ID选择器名称{css样式代码;} 三、后代选择器...

  • 《Python web开发》笔记 三: CSS基础

    CSS常用选择器 通配符选择器 * id选择器(id #) 类选择器(class .) 元素选择器(E) 后代选...

  • css3(1)

    之前的css属性选择器包括:类选择器,id选择器,标签选择器,关联选择器,组合选择器,伪类选择器等 css3属性选...

网友评论

      本文标题:css选择器平时开发关于id选择器和类选择器的选择的思考

      本文链接:https://www.haomeiwen.com/subject/dqgykltx.html