css中class和id之间有什么区别?

更新日期: 2020-03-03阅读: 1.8k标签: class

我们平常在用DIV+css制作html网页页面时,常会用到class 和id来选择调用CSS样式属性。对学习CSS的新手来说class和id可能比较模糊,同时不知道什么时候该用class,什么时候又用id,以及它们用法与限制是怎么样的。


ID和class都是“钩子”

我们需要一个使用html/xhtml语言描述文档内容的方式,类似的基础元素有<h1>,<p>和<url>来完成这样的工作,但我们的基础标签不能覆盖网页元素和布局选择中的所有类型。因此我们需要ID和class。

例如

<ul id="nav">

这将明确的给我们针对这个无序列表的机会,我们可以操作它到页面中唯一的另一个无序列表中。

或者在我们的网页中有一个段落并且没有相关的标签去标注它,例如页脚(footer),这里我们可以这样做

<div id="footer">

或许我们有一些盒子(box)在我们的侧边栏中,为了保持内容分离的方式有:

<div>

这些ID和class的钩子需要我们进行标注并执行他们。css显然需要我们建立选择并做我们的风格,但一些类似JavaScript的网页语言也依赖他们。但他们之间的不同是什么呢?


ID是唯一的

  • 每个元素仅可以有一个ID

  • 每个页面仅可以有一个元素拥有这个ID

如果你不止一次的使用相同的ID你的代码将不能通过验证,验证对我们所有人来说很重要...


类不是唯一的

  • 你可以在多个元素中使用相同的类

  • 你可以使用多个类在一个元素中

很多类型信息需要应用到页面中的多个对象中,这些都需要class实现,例如页面多次使用“widgets”:

<div></div>
<div></div>
<div></div>

现在可用“widget”作为你的钩子,对每一个地方进行相同的类型设置。单如果需要他们中的一个变得更大,还能享有其他的属性,类可以覆盖这些,你也可以实行更多的类:

<div></div>
<div></div>
<div></div>

不需要去修改新类的名字,仅需要在新类中正确的填入属性,这里的类属性通过空格进行分隔已经被大多数浏览器支持。


css中id和class的区别

1、语法区别:

id对应css是用样式选择符“#”(井号)。

class对应css是用样式选择符“.”(英文半角输入句号)。

2、使用次数区别:

class可以在页面里面重复使用,

id由于在页面里面只能出现一次,所以不能重复使用,

所以尽量用class来写,这样能在页面里面重复引用你写的css,减小工作量和代码量。


ID和class对于浏览器没有默认设置

为一个元素添加一个id或者类并不会做任何默认的事情,

当我作为一个初学者的时候,这东西阻碍过我,你在一个网站工作断定使用一个特定的类名称解决了一个你现有的问题。然后又跳到另一个网站也碰到了相同的问题,并且使用相同的类名称来解决这个问题,想象这类名有一些神奇的属性,所以才发现它不工作。

class和ID他们自身没有任何风格信息。他们需要css作为他们的目标实现风格的显示。


条形码和序列号

在商店购买一个ipod,包装上有一个条形码,设备有唯一的序列号。

商店并不以有效的方式存储和使用序列号数据,使用条形码确实很简单的事情,如果价格发生变动,你可以修改条形码的价格,不会修改每个独立的序列号。

上述非常像ID和类,可重读使用的信息应该保存在类里面,总体唯一的信息需要保存在ID里面。


ID具有特殊的浏览器功能

类在浏览器中没有特殊的属性,但ID确实有一个非常重要的标注它自己的袖子。这个就是URL中的“hash value”。如有一个类似的URLhttp://yourdomain.com#comments,你的浏览器将会试图去定位ID叫做“comments”的元素,并且会自动滚动页面显示这个元素。注意这里很重要,浏览器将滚动任何元素,就是为了显示它需要显示的元素,所以如果你做一些特别类似你在body内部有一个滚动的div区域这样的事情,这个div也将被滚动。

这就是为什么id必须绝对唯一的重要原因,这样你的浏览器就知道哪里可以滚动。


元素可以两个都有

这里没有什么可以阻止你将ID和类放入一个单独的元素中,事实上它通常是一个好消息,例如默认为WordPress标注评论列表项

<li id="comment-27299">

它有一个类用于你想要的所有提交在页面上的风格,但他还有一个唯一的ID值(被WordPress动态生成的,恰到好处)。这个ID值用于直接链接,现在我能直接连接到一个页面上的特定提交。


CSS关不关心

关于css,在这里你用ID或类什么也做不了,有时候试着切换围绕在他们周围的数值来解决问题,不,css并不关心。


JavaScript关心的

JavaScript或许更多的工作是协调不同的类和ID间的关系,JavaScript依赖于每个页面中的特定元素,否则通常使用的getElementByld函数是不可靠的,对于熟悉jquery的人来说都知道用它添加、删除页面元素中的类是多么的简单。jQuery是本地并内嵌的函数。ID中不存在这样的函数。JavaScript不负责去操纵这些值,相对于引发更多的问题来说这是值得的。


如果不需要,就不要去用

类和id非常重要,使用时应明确语义,避免下面的情况:

<a href="http://css-tricks.com">css-tricks.com</a>

我们已经知道这个元素是一个链接,他有一个锚点的元素!没有特殊的需要使用class。通过它的标签我已经提供了风格。

避免这个:

<div id="right-col">

ID适当的使用作为一个页面将类似于一个单独的列,但名称不合适。师徒描述元素的上下文不在这里或者一个ID。


链接: https://www.fly63.com/article/detial/8840

ES6 class创建对象和传统方法生成对象的区别

JS语言传统创建对象的方法一般是通过构造函数,来定义生成的,下面是一个使用function生成的例子。ES5是先新建子类的实例对象this,再将父类的属性添加到子类上,由于父类的内部属性无法获取,导致无法继承原生的构造函数

es6新特性之 class 基本用法

ES6 提供了更接近传统语言的写法,引入了 class(类)这个概念,作为对象的模板。通过class关键字,可以定义类

mixin配合class实现多继承的绝佳妙用

mixin一般翻译为“混入”、“混合”, 早期一般解释为:把一个对象的方法和属性拷贝到另一个对象上;Mixin是一种思想,用来实现代码高度可复用性,又可以用来解决多继承的问题,是一种非常灵活的设计模式

Class:向传统类模式转变的构造函数

JS基于原型的类,一直被转行前端的码僚们大呼惊奇,但接近传统模式使用class关键字定义的出现,ES6的class只是个语法糖,其定义生成的对象依然构造函数。不过为了与构造函数模式区分开,我们称其为类模式。

JS 总结之class

class 是 ES6 的新特性,可以用来定义一个类,实际上,class 只是一种语法糖,它是构造函数的另一种写法。用法和使用构造函数一样,通过 new 来生成对象实例

class 类 this指向的问题

ES6中的 class定义一个类, 其内部包含 constructor构造函数, 除了在构造函数显示的定义一些属性, 其余的默认都添加到这个类的原型对象上。以上代码 classProxy(prosen2) 返回的是包含一层拦截器的实例对象, 当读取 sayName这个函数的是和会出发 get拦截等操作。

classList介绍和原生JavaScript实现addClass、removeClass等

使用jQuery可以给元素很方便的添加class和删除class等操作,现在原生的JavaScript也可以实现这个方法了。使用classList可以方便的添加class、删除class、查询class等。elementClasses 是一个 DOMTokenList 表示 element 的类属性 。

Class 的私有属性与私有方法

proposal-class-fields与proposal-private-methods定义了 Class 的私有属性以及私有方法,这 2 个提案已经处于 Stage 3,这就意味着它们已经基本确定下来了,等待被加入到新的 ECMAScript 版本中。

ES6 static

ES6中新增了class这个语法糖。此class并非java中的class,ES6中的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。其中有static关键字。

vue.js 动态绑定class

vue 指令以 v- 前缀标示,数据绑定的指令 v-bind:属性名, 简写为 :属性名, 简单的数据绑定例子如下;vue 的分隔符默认是 {{ }}, 在分隔符里面的字符串会被认为是数据变量,可以通过 方式设置class

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!