首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

html css中id和class的区别比较

css中 # 和 . 区别 . 用于id #用于class属性 html css中id和class的区别比较 1、语法区别: id对应css是用样式选择符“#”(井号)。...class对应css是用样式选择符“.”(英文半角输入句号)。 2、使用次数区别: id属性,只能被一个元素调用(以“#”选择符命名CSS样式在一个页面只能使用调用一次)。...在同一个页面,只可以被调用一次,在CSS里用“#”表示。...class类标记,可以用于被多个元素调用(以“.”选择符命名样式可以一个页面使用多次)是类标签,在同一个页面可以调用无数次(没限制的),在CSS里用“.”表示。...ID就像一个人的身份证,用于识别这个DIV的, Class就像人身上穿的衣服,用于定义这个DIV的样式。 一般一个网页不设二个或二个以上同ID的div,但Class可以多个DIV用同一个Class。

8110

【编码规范】Airbnb CSS u002F Sass 编码风格指南

举个例子: .listing { font-size: 18px; line-height: 1.2; } 选择器 在规则声明中,“选择器” 负责选取 DOM 树中的元素,这些元素将被定义的属性所修饰...属性以键值对形式存在,一个规则声明可以包含一或多个属性定义。...不要使用 ID 选择器。 在一个规则声明中应用了多个选择器时,每个选择器独占一行。 在规则声明的左大括号 { 前加上一个空格。 在属性的冒号 : 后面加上一个空格,前面不加空格。...ID 选择器 在 CSS 中,虽然可以通过 ID 选择元素,但大家通常都会把这种方式列为反面教材。ID 选择器给你的规则声明带来了不必要的高优先级,而且 ID 选择器是不可重用的。...嵌套选择器中的内容也要遵循上述指引。

2.4K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    CSS快速入门(一)

    相邻选择器 弟弟选择器 属性选择器 语法 示例 分组与嵌套 伪类选择器 语法 示例 标准伪类索引 选择器参考表 网站分享 CSS快速入门 简介 层叠样式表 — 也就是CSS — 是你在HTML之后应该学习的第二门技术...规则的第一部分。...它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式。选择器所选择的元素,叫做“选择器的对象”; css是用来调节标签样式的 那为什么需要学选择器呢?...例如,如果我的h1和.special类有相同的CSS,那么我可以把它们写成两个分开的规则。...属性并且属性值包含以空格分隔的"logo"的元素 */ a[class~="logo"] { padding: 2px; } 分组与嵌套 如果存在多个标签需要调整为同一样式,那么使用分组和嵌套可以减少代码的冗余

    94920

    CSS入门8-三大特性之层叠特性与优先级

    test3.1 3.2 多个样式规则 多个样式规则冲突,其实有很多种情况。还记得我们学过样式引入方式有四种,涉及三种样式,分别是内联,内部和外部(参考CSS入门4-引入CSS)。...结论:id > (类和属性) > 元素,类和属性同级,遵循同级元素后者覆盖前者的规则。...有如下结论: 结论:id > (类,属性,伪类) > 元素,类,属性和伪类同级,遵循同级元素后者覆盖前者的规则。...3.2.1.3.2 外部样式在多个文件之间发生冲突 这种情况遵循后者覆盖前者的原则,后面的link优先于前面的link,而不管其加载的顺序如何。...权重 css知多少(3)——样式来源与层叠规则 深入理解CSS中的层叠上下文和层叠顺序

    94830

    浅谈 Css 规范

    修饰符可以使用中划线(_)或破折号(-)进行命名,例如 .header--large、.main--centered、.footer--light 等。 命名规则 使用大写字母命名块。...,是动态CSS更易于管理)的抽象思维,主张将元素的样式抽象成多个独立的小型样式类,来提高样式的灵活性和可重用性。...命名规则 SMACSS 推荐使用前缀来区分不同部件: 基础规则是直接作用于元素的,因此不需要前缀,一般使用元素、属性、伪类等选择器。不应该出: class、ID、!important 等。...实践应用 class="layout-grid"> class="field"> id="searchbox" />...增加复杂性: 有时候遵循SMACSS的规范可能会增加代码的复杂性,特别是在项目较小或简单的情况下。 可能导致过度设计: 过度遵循SMACSS的规范可能导致样式表过度设计,增加不必要的复杂性。

    10810

    3.CSS优先级-CSS进阶

    三、CSS优先级 层叠,指的是样式的覆盖。当样式的覆盖发生冲突时,以优先级高的为准。 当同一个元素 的同一个样式属性被赋予多个属性值时,我们就需要遵循一定的优先级规则来选择属性值。...important 在CSS中,我们可以使用!important规则来改变样式的优先级。 (1)覆盖其它所有样式 如果一个样式使用!...important两种使用情况 在CSS中,!...important的css语句 使用!important可以将样式提升到最高级,不管这个样式是在哪个选择器中。 如果在同一样式中出现了多个!important,则遵循后来者居上原则。...(4)实际开发 在实际开发的过程中,我们经常会遇到写在后面的被写在前面的样式覆盖了,这时就应该考虑一下是否是CSS优先级引发的问题。 了解CSS优先级规则,能够为我们提高不少开发效率。

    56321

    50个有价值的CSS编写规则,让你写出更好的CSS

    多年来,我收集了一组规则和工具,这些规则和工具在CSS之旅中对我有很大帮助,我想与你分享其中我觉得比较实用及有有价值的50条规则。...寻找允许您有效渲染 CSS 但不要采取任何极端措施的策略。 例如,出于样式目的向所有内容添加 id 或 class,除非您使用类实用程序优先库或确实需要额外的性能。...设计系统允许你为未来构建,因为它允许你定义一般设计规则和规范、遵循组织、模块化、定义最佳实践等。它是面向未来的策略的,原因是它更容易在全球范围内引入更改、修复和配置事物。...33 、 遵循 CSS 方法论 CSS 方法将确保你的样式的一致性和未来证明。有几个选项可以尝试,或者你甚至可以采用多个选项。...这完全是为了了解你对 CSS 特异性的理解。 40、 整理你的风格 Linting 的工作原理是确保你遵循为样式定义的规则,并确保你的样式一致、结构良好,并遵循 CSS 最佳实践。

    2.4K20

    如何使用CSS命名规范提高您的编码效率

    CSS命名约定是指一套被公认的指导方针和最佳实践,用于在CSS代码中为样式命名类和ID。这些指南强制要求为这些类/ID分配的名称应保持一致和描述性,提供一种组织或层次结构的形式。...在代码库中使用明确定义的命名约定的优势 使用明确定义的CSS类/ID命名约定将为您的工作流程带来以下好处: 代码一致性:命名约定规定了在为CSS属性分配名称时应遵循的规则;这使得命名风格标准化,并确保所有团队成员在开发过程中采用类似的方法...易读性和可理解性:遵循CSS命名约定使开发人员能够一目了然地识别样式块的目的、代码中对应的组件以及与其子元素、父元素和兄弟元素的关联形式。这减少了在代码库中理解样式结构所花费的时间。...CSS命名原则和最佳实践 在前一节中定义了CSS命名约定,我们将讨论在编写代码时应遵循的最佳实践以及CSS类名一致命名的准则。...遵循命名规范:在工作流程中采用CSS命名规范,以帮助创建结构化和描述性的类名。 分离结构和呈现:在组织CSS时,将与元素的布局和定位相关的样式与覆盖其呈现的其他样式(如颜色、字体、边框等)分开。

    40730

    HTML+CSS【规范】

    6.字符小写 7.选择器 8.代码注释 9.不要随意使用ID 10.为选择器添加状态前缀 11.CSS命名规范(规则) ---- 前言 HTML+CSS【规范】 个人主页:@MIKE笔记 来自专栏...4.去掉小数点前的“0” 5.连字符CSS选择器命名规范 1.长名称或词组可以使用中横线来为选择器命名。 2.不建议使用“_”下划线来命名CSS选择器,为什么呢?...在xhtml标准中规定了所有标签、属性和值都小写,CSS 书写也应该遵循此约定。 7.选择器 当一个规则包含多个选择器时,每个选择器独占一行。 、+、~、> 选择器的两边各保留一个空格。...9.不要随意使用ID id在JS是唯一的,不能多次使用,而使用class类选择器却可以重复使用,另外id的优先级优先与class,所以id应该按需使用,而不能滥用。...11.CSS命名规范(规则) 常用的CSS命名规则 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体佈局宽度

    81650

    良好的CSS编码习惯

    这是布兰的第 6 篇原创 一个 css 文件的核心内容是由许许多多的 css 规则组成的,而每个规则又包含了两部分:选择器和声明;声明块里可能又包含多个声明,每个声明又是由属性和值组成的。...ID和Class的命名规范 ID 和 Class 的主要习惯于如下命名方式: 全部字母用小写,避免使用驼峰命名法。 使用短横线-来作为连接单词之间的字符,避免使用下划线_。...选择器 在 css 的世界里不太欢迎 ID 选择器,因为 ID 是作为某个元素的唯一标识而设定的,但是元素的样式是可以被重复定义,层层覆盖的。...规则中的第二部分,声明块中自然也有许多需要注意的地方。...声明的顺序 在 css 中存在好几百个属性,如果需要一个 css 规则里几乎可以写满这些属性。

    59020

    CSS元素选择器是怎样运作的?

    CSSOM树 当我们写下一组 CSS 样式时,例如: #id .class h4 + p { ... } 浏览器在解析它时,你可能会认为 CSS 会按照由左到右的依序找出#id>.class>h4...通过 class =“ d”> 中的 .d 来思考,这样的 CSSOM 树在套用样式时,必须对所有的样式规则进行检查,以确认样式规则是否会影响到 .d,到最后才能确定可能会影响到 .d 的样式规则有这三条...和前面的例子一样,从 class =“ d”> 中 .d 的角度来看,由于会被样式规则影响到的目标元素,已经全都集中在第一层了,所以就不用再去便利整个 CSSOM 树了,甚至只需要检查 .d...套用规则 最后是套用规则。浏览器会遵循以下顺序和样式规则权重套用所有的样式规则: 浏览器的预设值 浏览器的使用者偏好设定 开发者定义的 CSS inline style 加上 !...状态一致就是要满足以下几个条件: 没有设定 ID tag 及 class 必须完全一致 没有设定 style 属性 样式规则中不能使用各种同级选择器(例如:〜,+,:first-child 等) 由于上面的条件

    1.7K10

    Android开发人员初识JavaScript

    变量 在JavaScript中,定义变量需要使用var关键字,语法如下: 1var 变量名 变量名要遵循命名规则: 变量必须使用字母、下划线或者美元开始 可以使用任意多个英文字母、数字、下划线或者美元符号组成...摘自慕课网 函数 和其他语言一样,JavaScript同样具有函数,在JavaScript中如何定义一个函数呢: 1function 函数名() 2{ 3 函数代码; 4} 函数的定义遵循以下规则...1 _blank:在新窗口显示目标网页 2 _self:在当前窗口显示目标网页 3 _top:框架网页中在上部窗口中显示目标网页 (3).相同 name 的窗口只能创建一个,要想创建多个窗口则...摘自慕课网 文档对象模型DOM 1、通过ID来获取元素 在HTML中,元素的id是唯一的,那么我们可以通过id来获取某一元素,然后对标签进行动态操作。...5、控制类名 通过className属性设置或返回元素的class属性。 1object.className = "css样式"; 通常使用该属性为某个元素动态改变css样式。

    1.6K20

    面试题整理|45个CSS面试题

    例如对一个站点中的多个页面使用了同一套CSS样式表,而某些页面中的某些元素想使用其他样式,就可以针对这些样式单独定义一个样式表应用到页面中。...Q9、CSS中使用ID和Class的区别? 1)ID:ID属性的操作类似于CLASS属性,但有一点重要的不同之处:ID属性的值在整篇文档中必须是唯一的。这使得ID属性可用于设置单个元素的样式规则。...包含ID属性的选择器称为ID选择器。ID选择器的标志符是散列符号(#) 2) Class:CLASS属性允许向一组在CLASS属性上具有相同值的元素应用声明。BODY内的所有元素都有CLASS属性。...标签已呈现,只是在页面上看不到。 Q28.CSS的特异性是什么意思? 如果有两条或两条以上指向同一元素的冲突 CSS 规则,则浏览器将遵循一些原则来确定哪一条是最具体的,并因此胜出。...遵循前面的示例: .my-class { ​ font-size: 12px; ​ } ​ @media (min-width: 600px) { ​ .my-class { ​

    4.5K30

    模块化的核心思想──页面重构中的模块化设计(四)

    早在Qzone4.0的页面架构中已经在项目中开始摸索提高代码复用的方法,只不过当时并没有很清晰的认识到“模块化”这个思想。从去年的《 从宜家的家具设计讲模块化 》开始,模块化成了我主要的一个学习方向。...首先来了解下页面重构中模块化的核心思想: 将HTML和CSS通过一定的规则进行分类、组合,以达到特定HTML、CSS在特定范围内最大程度的复用。...有三个关键词: 规则 、 特定范围 、 最大程度的复用 。怎么理解呢? 规则编写模块时需要遵循的规范特定范围模块可使用的范围。与样式的作用域有关,大部分模块的使用范围仅仅是某一个栏目或站点。...我们知道一个HTML标签可以绑定多个样式,所以我们可以这样去定义一个模块: class="class-a class-b class-c"> ......效果展示 也有同学主张用ID去表示“模块名”,我认为这种方式扩展性比较差,而且很容易与开发的ID冲突,不过也不失为一个方法。

    44340

    博客园美化之旅第一天(CSS图层关系,背景相关设置,字体相关设置)

    如果同个元素有两个或以上冲突的CSS规则,浏览器有一些基本的规则来决定哪一个非常特殊而胜出。...比如: p { color: red; } p { color: blue; } p元素的元素将是蓝色,因为遵循后面的规则。...比如: div p { color: red; } p { color: blue; } 也许你看起来p元素在div元素里面的颜色是蓝色,就像后面p元素的规则,但是第一个选择器的特性却是红色。... 运行结果:#id3{font-size:18px} 删掉上面CSS中的前两行可以得出,如果没有最高级别的#ID会寻找.class 即使后面的CSS按照“原则二... #id1 .class2 span{font-size:14px} 当然也可以理解为在原则二层层比较中“少一个层级的样式”,缺少的那个层级没有“层级较多的样式

    78330

    Bootstrap快速入门

    该值为0;b是该css选择器上id数量的总和,一般为1个;c是用在该css选择器上的其他属性css选择器和伪类的总和,包括class(.btn)和属性css选择器li[id=red];d计算元素div和伪元素...first-child;通用css选择器*的0优先级,即最低;如果2个css具有相同优先级,在样式表中后面的起作用。...常用组件 在bootstrap中,CSS组件都是通过AO模式进行架构的:Append附加;Override重写。CSS组件包括8种基本类型,应用中对其进行组合即可。 ?...在bootstrap中,js插件遵循以下3个规则。...Html布局规则:基于元素自定义属性的布局规则,比如使用类似于data-target的自定义属性 javascript实现步骤:所有插件都遵循jQuery插件开发的标准步骤,所有的事件保持统一IDE标准

    4.2K61

    CSS英文命名规范整理及参考

    规范使用CSS命名规则,可以改善优化功效,特别是在团队合作的时候可以有效提高开发效率。...一、命名规则说明 所有的命名最好都小写 属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",id="divcss5" 每个标签都要有开始和结束,且要有正确的层次,排版有规律工整...空元素要有结束的tag或于开始的tag后加上"/" 表现与结构完全分离,代码中不涉及任何的表现元素,如style、font、bgColor、border等 h1到h5的定义,应遵循从大到小的原则,体现文档的结构...给每一个表格和表单加上一个唯一的、结构标记id 给图片加上alt标签 尽量使用英文命名原则 尽量不缩写,除非一看就明白的单词 二、页面布局(layout)命名参考 // 网页公共命名 wrapper...但我们最好遵循主要的、重要的、特殊的、最外层的盒子用“#”(井号)选择符号开头命名,其它都用“.”(小写句号)选择符号开头命名的规则。 —————END—————

    1.4K30
    领券