在CSS中遵循多个ID / Class规则 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

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。

1.9K1 0

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

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

3K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

【前端】CSS三大特性详解

What is CSS? 1. 层叠性（Cascading）层叠性是 CSS 中的基本概念之一。它描述了当多个 CSS 规则应用到同一个 HTML 元素时，如何处理这些规则的冲突。...换句话说，就是当多个选择器定义了相同的属性时，哪些属性会被最终采用。层叠性的核心在于解决样式冲突，特别是在大型项目中，有多个 CSS 文件或多层次样式的情况下。 1.1 层叠性是什么？...1.3 层叠性在实际项目中的应用在实际开发中，经常会有多个 CSS 文件。...在 CSS 中，继承性使我们可以避免为相同的属性重复编写样式，从而简化代码。 2.1 什么是继承性？...="box" class="box">特殊性示例文本在这个例子中，元素具有 id="box" 和 class="box"，而 #box 的特殊性为 0,1,0,0

6581 0

CSS快速入门（一）

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

1.6K2 0

浅谈 Css 规范

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

8211 0

3.CSS优先级-CSS进阶

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

1.1K2 1

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

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

1.5K3 0

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 页面外围控制整体佈局宽度

1.4K5 0

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

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

3.8K2 0

良好的CSS编码习惯

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

1.2K2 0

【前端】HTML+CSS 编程规范指南

HTML5 和 CSS3 是目前最流行的前端开发语言，制定和遵循一套编程规范对于提高代码的质量和效率非常有帮助。...在本文中，我们将深入探讨 HTML5 和 CSS3 编程的各项规范，包括命名、布局、嵌套规则、注释、空格等内容，帮助开发者写出更加优雅和高效的代码。...注意事项：避免 class 与 id 重名。 id 应用于模块或一级结构区域，并且必须唯一，不允许修改线上项目的 id 名称。...精简代码：在 HTML5 中可以省略 script、style 等标签的 type 属性，以减少代码冗余。...小结本文为大家介绍了 HTML5 和 CSS3 编程中的重要规范，遵循这些规范能够有效地提升代码的可读性和维护性。特别是在多人协作的项目中，代码规范可以降低沟通成本，减少 BUG 的发生。

8751 0

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 等）由于上面的条件

2.5K1 0

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样式。

2.5K2 0

CSS选择器

类型选择器，是对 HTML 标签中的 class 属性进行选择。CSS 类选择器的选择符是 “.”。中 id 属性进行选择。...而最终什么选择器在层叠中胜出遵循下列规则。 !important 具有最大优先级。也就是说任何情况下，只要定义了它,它的样式最终就会被应用。中先定义的 box2 类样式，再定义的 box 类样式，最后显示的是 box 类中的样式。优先级：规则（1）：行内样式 > 页内样式 > 外部引用样式 > 浏览器默认样式。...注：权重相同时，CSS 遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。所有都相同时，声明靠后的优先级大。

1.8K2 0

博客园美化之旅第一天（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} 当然也可以理解为在原则二层层比较中“少一个层级的样式”，缺少的那个层级没有“层级较多的样式

1.1K3 0

一些开发规则

css id、class命名最好是（名词短语，以 - 隔开：user-id等等）。...常见的动词有：get、set、update、delete、remove 不管使用以上哪种规则，在开发同一个项目时，必须使用同一种规则，严禁混用。...注意：我自己是这样使用的：在JavaScript中，属性、变量和方法命名都使用字母大小写区分的方式；在php中，变量和方法命名使用下划线区分的方式。...但是，在面向对象编程中，class中，全部使用字母大小写区分，类名的所有单词首字母大写，并且文件名即类名。...在Js中，通常使用一些方法或者css属性时，有 "-" 的应该改为后面第一个单词字母大写。

1.5K1 0

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

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

7734 0

CSS---网络编程

(也就是直接用html中的标签) 2) class选择器。其实使用的是标签中的class属性。 (前面加：# ) 3) id选择器。其实使用的是标签的中的id属性。...(前面加：. ) 每一个标签都定义了class属性和id属性。用于对标签进行标识，方便对标签进行操作。...在定义的中，多个标签的class属性值可以相同，而id值要唯一，因为JavaScript中经常用。...☆选择器的优先级标签名选择器 class选择器 id选择器 < style属性扩展选择器 ☆关联选择器标签是可以嵌套的，要让相同标签中的不同标签显示不同样式，就可以用此选择器。...无特殊定位，对象遵循HTML定位规则。

1.7K2 0

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标准

6K6 1

ML简介与CSS3样式表

在电子计算机中，标记指计算机所能理解的信息符号，通过此种标记，计算机之间可以处理包含各种的信息比如文章等。它可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的源语言。...样式在HTML中的书写方式：样式有三种书写方式，第一种是直接在style属性上写，style里有很多的样式子属性，不同的字属性使用分号分开，示例： ? 运行结果： ?...在这里要说明一下.class选择器与#id选择器的区别：id是唯一的是不可重复的，一个页面只可以使用一次，class则可以多次引用，一个页面内可以使用多次。...所以从概念上说就是不一样的：id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。...当我们使用#id选择器时，应当遵循规范的语法不重复地去使用，要明白这两个选择器的区别。错误写法示例： ? 运行结果： ?

1.4K1 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭