css定义为啥不全用class而要用id

author author     2023-05-06     583

关键词:

在某些方面,ID 选择器类似于类选择器,不过也有一些重要差别

    引用的形式上,类选择器提供了对类名相同的标签同时样式控制的便利,课单独操作一个标签时继续引入一个Class有些大材小用,尤其是维护一个样式复杂的页面,用class去操作单一的标签容易搞混淆

    优先级上,ID选择器可以保证更高的优先级,达到更精细的样式控制

    ID可以保证唯一性,与类不同,在一个 HTML 文档中,ID 选择器会使用一次,而且仅一次

    ID 丰富了样式的描述,同时提供更精细的动作选择支持,比如配合Jscript的使用,可以独立于元素来选择 ID。有些情况下,您知道文档中会出现某个特定 ID 值,但是并不知道它会出现在哪个元素上,所以您想声明独立的 ID 选择器。有利于配合JS等的操作

参考技术A 这是因为,ID的优先级非常高,用id 可以绝对提高优先级!
--------------
我简单给你讲解,用class 的好处:
css 可以用 class ,也可以用 id 。他们区别在于:

一个页面只有一个id (这是标准,规定的),但是可以有无限个 class。
所以,css 如果用 id ,那不利于多出引用。
---------------------
但是,css定义为什么不全用CLASS而要用ID

有问题追问,我是前端攻城师!追问

但是,css定义为什么不全用CLASS而要用ID? 继续回答吧

追答

因为 id 优先级高。

css 写样式的时候,为了高度分离,写很多小的模块。

但是有时候冲突,要提高优先级,就用ID。

别的没什么。

当然,写得好的 css ,几乎很少甚至不用 id!!

因为 id 会占用额外的内存。

本回答被提问者采纳
参考技术B ID是用于标记 页面中只出现一次的对象,如页脚,如果用ID标识它 别人就不会轻易修改你的ID标识过的页脚CSS样式。 如果你用class去同时标识页脚和一个段落,别人只是为了更改段落样式往里面加了新属性,导致页脚格式变了,导致引用此class所有页面的页脚格式变了。显然不应该用class同时标识页脚和段落,页脚应该单独用ID标识来告诉这是一个标准格式,其他人不能随意往里面做修改。标识为ID的另一个优点是指定了一个标准,因为页脚只会用id去标识页脚的样式,别人只会第一时间去找ID修改,而不是去找Class。加快了搜索修改的速度。 参考技术C 理论上说,你可以不使用 id。但你要给每一个需要样式的元素加上 class。

一般一个页面的排版中只有一个主要的导航栏 (id="nav"),一个主要的内容栏(id="content"),一个主要的边栏(id="sidebar")。。。这些元素在页面中都是【唯一】的,所以使用ID来区分。

但有些元素的样式是一样的,比如两个相同的div小版块,这时就需要用 class。

class 和 id 的主要区别在于:class 可以在一个页面多次使用在不同元素,但一个 id 在一个页面只允许出现一次。

除此之外,id 还可以通过地址栏定位元素。我们经常看到地址栏中有 # 符号,例如 index.html#comments,当页面加载后,浏览器会自动在页面中寻找 id 为 comments 的元素,并自动卷动页面至此元素。

id 除了在 css 中,最大的用途应该是给 Javascript 提供了直接帮助。document.getElementById('element_id'),通过 id 来获取元素。
参考技术D 在符合W3C的页面里,id是唯一的,class可以有多个。虽然都可以定义样式,但是还是有差别的。往往一个HTML页面是要配合CSS和JAVASCRIPT一起用。id在这个时候就有用处了。javascript里,可以用document.getElementById(id名称)来取得这个标签的object,然后操作。

一个网站css没有用id都是class这样有啥不好吗正确的规则是啥样的呢

...低,如果同时用了id和class且样式属性相同时你会发现id中定义的样式起作用。另外最主要的区别ID只可以用一次class可以重复使用。现在人懒,都默认使用class只有需要用到Javascript操作的元素才定义一个id这样也很规范。参考技术... 查看详情

css的id和class有啥区别?如何正确使用它们

...位置引号中就只能有一个css5_id2.ID要设置样式时用“#”号定义,而class用“.”号定义。3.ID的优先级大于class比如说在同一个标签中,id样式中定义了文字颜色为红色,class文字颜色为绿色。结果显示是id的红色。(如下图)参考技... 查看详情

为啥html,xml的特殊符号转义不用斜杠,而要用"这样的奇怪形式?

能说明技术上的必要性最好。1.概念不同。转义字符是开始一个字符序列,使得转义字符开头的该字符序列具有不同于该字符序列单独出现时的语义。字符实体是HTML/XML中的预留字符,必须被替换为字符实体。2.用途不同。转义主... 查看详情

html,css里面关于id,class,name属性的区别和用法

1、id:id是设置标签的标识。用于定义一个元素的独特的样式。在CSS样式定义的时候以“#”来开头命名id名称。用法:若一个标签的id="myid",那么使用它的时候通过”$("#myid")“来获取当前标签或使用“#myid”来定义CSS... 查看详情

为啥有些css的class标签里面有两个相同的标签,定义却截然相反呢?如下

.highlight_tippadding:7px00;z-index:10;position:relative;position:absolute;left:0;bottom:0;width:733px;height:57px;这里有两个position那是写错了或者写多了。这种情况是以后面那个为准的。参考技术A相同的标签如果没有使用HACK标示,取最后一个生效。没... 查看详情

css之选择器

...择器  一、选择器的类型  1、id选择器      定义:通过id选择元素(选择到的是一个元素)。id在页面上具有唯一性。      语法:#id名称{要添加的样式}  2、class选择器      定义:通过class选择元... 查看详情

css-id和class

...;HTML元素以id属性来设置id选择器,CSS中id选择器以"#"来定义;以下样式规则应用于元素属性id="para1": 案例:<!DOCTYPEhtml><html> <h 查看详情

为啥 CSS 选择器/HTML 属性首选破折号?

...:2011-11-2512:35:54【问题描述】:过去我总是使用下划线来定义HTML中的class和id属性。在过去的几年里,我改用破折号,主要是为了让自己与trendinthecommunity保持一致,不一定是因为它 查看详情

css的id和class有啥区别?如何正确使用它们

...id来区分。还有一点,由于id是页面中唯一的,更多的是定义来留给给页面里面的javascript用。补充:class和id在页面里面的使用方法:class:<styletype="text/css">.footerbackground:red;</style><divclass="footer">footer<... 查看详情

htmlcss中id和class的区别比较

...证,用于识别这个DIV的,Class就像人身上穿的衣服,用于定义这个DIV的样式。一般一个网页不设二个或二个以上同ID的div,但Class可以多个DIV用同一个Class。3、语义和使用不同:id作为元素的标签,用于区分不同结构和内容,而clas... 查看详情

react项目的css样式,为啥标签选择器和id选择器可以生效,类选择器不行呢?

说将className更改为class的一定是不会ReactJSX语法的。请忽略。看你代码似乎没问题,请检查css文件是否引入正确路径。是否有相关的webpackloader,例如css-loader,style-loader等。看看浏览器是否报错。参考技术AclassName改为class 查看详情

id和class的区别

id和class是定义css样式用到的,不同的是定义样式时的写法不一样,使用id选择样式时,定义的格式为#main{width:20px;},使用class时用到的是.main{width:20px;}id重复使用在应用到js的时候可能会产生错误(当js代码中用到这个id的时候)... 查看详情

html中,id,name,class之间的有啥区别?

...用方法:class="baobao"2)id是设置标签的标识。用于定义一个元素的独特的样式。在CSS样式定义的时候以“#”来开头命名id名称如一个CSS规则:#binbinfont-size:larger使用方法:id="binbin"id是一个标签,用于区分不同的结... 查看详情

2015.3.7dllcstring不能作为传入参数而要用char*

extern"C"__declspec(dllexport)voidCalcArc_2(Point2D&pm,doubleam,doublean,CStringtd,Arch&arc)td在析构时经常出些莫名其妙的错误,原因是CString的机制跟内存有关传入参数改成char*td后,在函数体内部再转换成CString就没有问题了,如:CStringtdr=td;.... 查看详情

jquery链式操作如何实现以及为啥要用链式操作

链式操作就是分步骤地对jQuery对象实现各种操作,举个栗子:$("#Test").css('color','red').show(200).removeClass('style');上面的例子就是链式操作,在一行代码里,对id为Test的对象进行了三项操作:先设置其字体颜... 查看详情

乔布斯剧院为啥要用天价座椅?

650)this.width=650;"class="size-fullwp-image-2471aligncenter"src="http://www.kjxfx.com/wp-content/uploads/2017/09/%E5%9B%BE%E7%89%875-9.png"width="530"height="331"style="border:0px;vertical-align:midd 查看详情

急求!!!!!!!!

...《常用css缩写语法总结》,这里就不展开描述。二.明确定义单位,除非值为0忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100,但是在CSS中,你必须给一个准确的单位,比如:width:100pxwidth:100em。只有两个例... 查看详情

cssid和class选择器

...式。HTML元素以id属性来设置id选择器,CSS中id选择器以"#"来定义。以下的样式规则应用于元素属性id="para1":#para1{text-align:center;color:red;}注意:ID属性 查看详情