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

将css选择器限制为一个类,而不重复类名

将CSS选择器限制为一个类,而不重复类名的方法是使用BEM(Block Element Modifier)命名规范。

BEM是一种命名约定,用于创建可重用、可维护的CSS代码。它的核心思想是将CSS选择器限制为一个类,并使用特定的命名规则来表示元素之间的关系。

BEM命名规范由三个部分组成:块(Block)、元素(Element)和修饰符(Modifier)。

  1. 块(Block):块是一个独立的、可重用的组件或模块,它代表一个完整的实体。块的类名应该以一个单词作为前缀,用连字符分隔单词,例如:.block
  2. 元素(Element):元素是块的一部分,不能独立存在。元素的类名应该以块的类名作为前缀,用两个下划线和一个单词作为后缀,例如:.block__element
  3. 修饰符(Modifier):修饰符用于修改块或元素的外观或行为。修饰符的类名应该以块或元素的类名作为前缀,用两个连字符和一个单词作为后缀,例如:.block--modifier.block__element--modifier

使用BEM命名规范可以有效避免类名的重复,同时提高代码的可读性和可维护性。在前端开发中,BEM广泛应用于构建大型的Web应用程序和网站。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)、腾讯云对象存储(COS)、腾讯云内容分发网络(CDN)。

  • 腾讯云云服务器(CVM):提供可扩展的云服务器实例,可满足不同规模和需求的应用场景。详情请参考:腾讯云云服务器
  • 腾讯云对象存储(COS):提供安全、稳定、低成本的对象存储服务,适用于存储和处理各种类型的非结构化数据。详情请参考:腾讯云对象存储
  • 腾讯云内容分发网络(CDN):提供全球加速、高可用的内容分发网络服务,可加速网站、应用程序、音视频等静态和动态内容的传输。详情请参考:腾讯云内容分发网络
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【web前端阶段二】CSS巩固学习(持续更新)

1.什么是CSS CSS(Cascading Style Sheets)层叠样式表,又叫级联样式表,简称样式表 用于HTML文档中元素样式的定义 – 实现了内容与表现分离 – 提高代码的可重用性和可维护性...选择器 .className{ } 如:.box{ color:red; } 不能以数字开头 注意:一个页面中class名字可以重复 .libai{...ID选择器 #idName{ } 如:#box{color:red;} 注意:一个页面中id相同的id只能出现一次 #libai{ color:orange...合并选择器 语法:选择器1,选择器2,…{ } 作用:提取共同的样式,减少重复代码 例如:.header,.footer{height:300px;} ---- 优先级: ID>>通用>元素 --...,其选择器排序:ID选择器>选择器>标签选择器(范围越小越优先) 外部样式表的ID选择器>内部样式表的标签选择器 7. div+css布局 内容和显示分离,便于维护扩展,网页布局方便,当需求改变的时候

64240

CSSCSS 总结 ① ( CSS 引入方式 | CSS 选择器 | 基础选择器 | 复合选择器 ) ★

, 每个页面都使用内部样式表会导致代码重复和维护困难 ; 标签选择器 { 属性名称1: 属性值1;...属性名称2: 属性值2; 属性名称3: 属性值3; } 外链式 : CSS 样式代码 写在一个单独的 .css 文件中 , 然后在 HTML...} h3 { font-size:20px; } 选择器 ( 推荐使用 ) : 页面中的 某几个 标签选择出来 , 使用 " . " 识别标签 ; 首先 , 在标签中的 class...属性中设置 , 标签内容 ; 然后 , 在 CSS 中使用 " . " 作为 选择器 , 选出设置指定的标签 , .name { color: blue...; } ; id 选择器 ( 推荐使用 ) : 使用 " #id " 选择 指定的 某一个 标签 ; 首先 , 在 HTML 中 设置 标签的 ID , 标签内容</

13610

前端成神之路-CSS基础选择器

第01阶段.前端基础.CSS基础选择器 CSS选择器(重点) 学习目标: 理解 能说出选择器的作用 id选择器选择器的区别 应用 能够使用基础选择器给页面元素添加样式 1....CSS基础选择器 2.1 标签选择器 概念: 标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一标签指定统一的CSS样式。...可以选择一个或者多个标签 注意 选择器使用“.”(英文点号)进行标识,后面紧跟(自定义,我们自己命名的) 长名称或词组可以使用中横线来为选择器命名。...记忆口诀 差异化选择 一个或多个 上面点定义 别写错 谁用谁调用 class来做。 嘿嘿,工作最多。 案例: ?...选择器(class) 好比人的名字, 是可以多次重复使用的, 比如 张伟 王伟 李伟 李娜 id选择器 好比人的身份证号码, 全中国是唯一的, 不得重复。 只能使用一次。

48710

大型编程电视剧连载 | CSS知识点硬核整理归纳(一)

1.3.2、内部样式表(内嵌样式表) 内嵌式是CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,这种也**只适用于学习或者是小型的项目,一般推荐使用。...1.3.3、外部样式表(外链式) 外链式是所有的样式放在一个或多个以**.CSS**为扩展的外部样式表文件中,通过link标签外部样式表文件链接到HTML文档中,基本用法: <link...我们可以看到大厂做的产品,一般制定两个以上的。 ? 注意: 各个中间用空格隔开。 多选择器在后期布局比较复杂的情况下,还是较多使用的。...可以选择一个或者多个标签。 2.2.2.4、注意 选择器使用.(英文点号)进行标识,后面紧跟(自定义,我们自己命名的)。 长名称或词组可以使用中横线来为选择器命名。...选择器(class) 好比人的名字, 是可以多次重复使用的, 比如 张伟 王伟 李伟 李娜 id选择器 好比人的身份证号码, 全中国是唯一的, 不得重复。 只能使用一次。

77610

CSS选择器

3) 选择的是所有的,不是某一个。所以是共性,不是特性。...2)同一个页面内id不能重复,即使不一样的标签,也不能是相同的id。 也就是说,如果有一个p的id叫做haha,这个页面内,其他所有的元素的id都不能叫做haha。 选择器 .就是的符号。...class属性可以重复,比如,页面上可能有很多标签都有teshu这个: 1 我是一个h3啊 2 我是一个h3啊 3 ...正确的思路,就是用所谓“公共”的思路,就是我们就是提供“公共服务”,比如有绿、大、线,一旦携带这个,就有相应的样式变化: 1 2...1*{ 2 color:red; 3} 效率不高,如果页面上的标签越多,效率越低,所以页面上不能出现这个选择器。 一些CSS3选择器 儿子选择器> IE7开始兼容,IE6兼容。

92620

SCSS 学习笔记 和 vscode下载live sass compiler插件配置

为了便于管理这样的属性,同时也为了避免了重复输入,SCSS 允许属性嵌套在命名空间中 注意font:后面要加一个空格 2.1.4 占位符选择器 %foo 必须通过 @extend 有时,需要定义一套公共样式...2.6.1 用占位选择器继承 注意:上面的图中 .alert 只是单纯的用于继承,不用做元素,但是它却导出成了 ,这时我们可以用 占位选择器%foo 对其进行声明,不用于元素...()两组选择器合成一个复合选择器。...注意2:使用 @use 时,重复引用 一个文件,会报错,但你又想引用,那就需使用模块。...,不会重复引入,@import会重复引入 @use引入的文件都是一个模块,默认以文件名作为模块,可通过as alias取别名 @use引入多个文件时,每个文件都是单独的模块,相同变量不会覆盖,通过模块访问

41110

HTML学习笔记——css基础

网页实际上是一个多层的结构,通过css可以分别为网页的每一个层来设置样式,最终我们能看到的只是网页的最上边一层。...3、外部样式表:(最佳)         可以css样式编写到一个外部的css文件中,然后通过link标签来引入外部的css文件。        ...声明块:指定要为元素设置的样式,由一个个声明组成。 声明是一个值对结构,一个样式名对应一个样式值,和值 之间以:连接,以;结尾。...三、CSS中的各类选择器 1、 元素选择器: 作用:根据标签名来选中指定的元素。 语法:  标签名{}  2、 id选择器: 作用:根据元素的id属性值选中一个元素,不能重复。...语法:  #id属性值{} 3、选择器: 作用:class是一个标签的属性,它和id类似,不同的是class可以重复使用,可以通过class属性来为元素分组。

70120

CSS基础——css 选择器

1. css 选择器的定义css 选择器是用来选择标签的,选出来以后给标签加样式。2. css 选择器的种类标签选择器选择器层级选择器(后代选择器)id选择器选择器选择器3....选择器根据来选择标签,以 . 开头, 一个选择器可应用于多个标签上,一个标签上也可以使用多个选择器,多个选择器需要使用空格分割,应用灵活,可复用,是css中应用最多的一种选择器。...6. id选择器根据id选择标签,以#开头, 元素的id名称不能重复,所以id选择器只能对应于页面上一个元素,不能复用,id一般给程序使用,所以推荐使用id作为选择器。...-- 无法应用以上样式,每个标签只能有唯一的id -->注意点: 虽然给其它标签设置id=“box”也可以设置样式,但是推荐这样做,因为id是唯一的,以后js通过id只能获取一个唯一的标签对象。...小结css 选择器就是用来选择标签设置样式的常用的 css 选择器有六种,分别是:标签选择器选择器层级选择器(后代选择器)id选择器选择器选择器

1.1K20

时机已到! 原子化接替语义化声明,TailwindCSS使用指南

采用传统的CSS规则书写,而是采用基于的Utility-first方法。...图片 基于的Utility-first方法,是指通过组合大量低级实用,来构建出高级组件和页面结构,不是通过选择器等方法直接写入样式规则。类似于我们需要一个果篮,而这个果篮有多种不同水果组成。...CSS看作一套可重用的样式“工具”或模块,每个只对应一个特定的样式效果,同时可以自定义,比如:我定义当前页面的bg-blue-500对应的颜色定制为 yellow,类似于送人时候,送两个果篮,一个果篮想放青苹果... 使用语义化的 CSS 有以下几个主要优势: 代码可读性更强。如p-6、max-w-sm等一目了然地表达了样式效果,甚至可以联想到最终的效果。...CSS 更模块化。不同的可组合使用,避免重复样式。 更易维护。直观的和模块化 CSS 让其他开发者更容易理解和修改样式。 可重用性更高。模块化的可跨页面、组件重复使用。 前后端分离。

2.5K00

CSS工程化

css的问题 冲突的问题 当你写一个css的时候,你是写全局的呢?还是写多个层级选择后的呢? 你会发现,怎么都不好!...,绝对不重名 通过命名规范来限制太过死板,css in js虽然足够灵活,但是书写不便。...如何应用样式: css module带来了一个新的问题:源代码的和最终生成的是不一样的,开发者只知道自己写的源代码中的,并不知道最终的是什么,那如何应用到元素上呢?...localIdentName 其他注意事项 css module往往配合构建工具使用 css module仅处理顶级,尽量不要书写嵌套的,也没有这个必要 css module仅处理处理其他选择器...css module还会处理id选择器,不过任何时候都没有使用id选择器的理由 使用了css module后,只要能做到让名望文知意即可,不需要遵守其他任何的命名规范 解决重复样式的问题 「css

85531

您知道SASS吗?

代码 您可能已经注意到.button 这个,多次输入名为button的,可能会造成额外的精力浪费,不是专注于.button有效地对进行分组和样式设置。...我发现做这件事既麻烦又乏味,特别是当我需要在重复命名CSS或写选择器的时候。...如果您使用的是BEM体系结构,那么您就节省了一些需要重复输入CSS选择器来遵循该体系结构时间,因为SASS在后台已经帮您生成了完整的CSS了。...比较SASS和CSS这两种语法,它们的代码如下所示: 左: SASS 右:从SASS编译出的CSS 您可以使用SASS对父子选择器进行分组 Sass的另一个优点是,它还可以帮助您通过几行代码选择器.../中的父子关系分组,就像您进行选择器连接的方式一样,只是添加了一个与号(&),您只需多加几个括号就能完成。

90010

CSS编写规范

4、每一个页面都应用一个独立的CSS文件,常用页面应该做成CSS文件模板 每一个页面都应用一个独立的CSS文件,不能出现多个页面的样式放到同一个CSS文件中,这样会延长加载时间,也会使得命名更加困难。...5、表现与结构分离:CSS样式都应写在CSS文件中,且尽量少用id、组合、属性选择器和行内样式以及style标签样式 为避免在CSS文件使用选择器和使用js添加选择器进行样式覆盖时因优先级问题而无法覆盖成功...5)连字符CSS选择器命名规范 ① 长名称或词组可以使用中横线来为选择器命名。 ② 建议使用“_”下划线来命名CSS选择器,为什么呢?...6)不要随意使用id id在JS是唯一的,不能多次使用,而使用class选择器却可以重复使用,另外id的优先级优先于class,所以id应该按需使用,不能滥用。...3、CSS命名规范(规则) 1)常用的CSS命名规则 内容 内容 头 header 搜索 search 内容 content/container 友情链接 friendlink 尾 footer

2.6K30

HTML5 & CSS3初学者指南(2) – 样式化第一个网页

为了克服这种局限性,我们引入另外2种选择器- ID选择器选择器。 ID选择器 每个 HTML 标签都有一个 id 属性,具有和其它不一样的命名。...例如,HTML 文档中有2个  标签,我们可以将它们中的一个命名为“para1”,一个命名为“ para2”。要在 CSS 代码中选择它们,需要在 ID 名称之前添加“#”。...要在 CSS 代码中选择它们,需要在其之前添加一个点字符(.)。我们可以通过选择器名将一组 CSS 样式共享给相同类的一组 HTML 元素。...不要以数字开头注意以下关于选择器的几点: 不要以数字开头 当你想要选择网页中的一组元素时,请使用 选择器的链接 如果一些元素需要设置为相同的样式,我们可以通过最少量的代码将它们一起设置...注意事项 让我们一起回顾一下今天的学习要点: CSS 区分大小写 选择器名称不能以数字开头 尽可能避免使用内嵌样式表 第二次的学习就到这里。

2.1K70

「前端工程四部曲」模块化的前世今生(下)

「优点:」 BEM 的优点在于所产生的 CSS 都只使用一个类别选择器,可以避免传统做法中由于多个类别选择器嵌套带来的复杂的属性级联问题。...代码清单中的命名规则的好处在于每个 CSS 都很简单明了,而且的层次关系可以与 DOM 节点的树型结构相对应。...并且每个样式对应一个,这样是为了后面可以重复使用这些组件的样式,避免重复写相同的样式。...而且需要巧妙运用,因为特定要求(强调重复使用选择器,避免使用ID选择器)如果运用不得当,反而可能会造成后续维护困难,所以使用此方案最好写上说明文档。...CSS 为其添加样式时,通过+属性选择器的方法来避免命名冲突,从而实现模块化。

71020

CSS---网络编程

CSS概述 CSS是层叠样式表(Cascading Style Sheets)用来定义网页的显示效果。可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的显示效果功能。...简单一句话:CSS网页内容和显示样式进行分离,提高了显示功能。 那么CSS和HTML是如何在网页代码中相结合的呢?通过四种方式:style属性 、style标签、导入和链接。...☆CSS代码格式 选择器名称 { 属性:属性值;属性:属性值;…….}...☆伪元素选择器 其实就在html中预先定义好的一些选择器,称为伪元素。 格式:标签名:伪元素。 标签名。:伪元素。 超链接a标签中的伪元素: a:link 超链接未点击状态。...如果某个对象用了绝对定位,其实就相当于这个对象漂浮在另一个层面(重叠),原来层面上自己占的位置被其他模块覆盖。 relative —相对定位。

1.1K20

【黑马程序员pink名师讲CSS】学好CSS有这一篇就够了(CSS笔记)

选择器具有差异化选择的优点,开发中最常用 差异化选择:可以单独所有同一种标签中一个或者多个标签 手动调用 ps:选择器名称要英文,有意义, 选择器命名英文大全 css中以“.”来定义选择器...">段落内容 2.多 我们可以给一个标签设置多个,从而达到更多选择的目的 a.多的使用 多个类型写到class里面,用逗号隔开 html: 段落内容 那为什么不把这两个选择器里的样式都合到一个选择器里呐?...问题问的好 因为多个选择器里可能有几个样式是相同的,就可以这些共同样式单独写到一个选择器中, 这样一来不用重复的做无用功(初次书写和修改),二来可以避免代码冗余....ID选择器 选择器可以多次调用,比如我们的名字,可以重复 P71.通配符选择器 css中,通配符选择器使用*来定义,它表示选择页面的所有标签 自动调用

2.3K20

CSSCSS简介,CSS基础选择器详解

注意: 选择器在 HTML 中以 class 属性表示,在 CSS 中,选择器一个点“.”号显示。...命名要有意义,尽量使别人一眼就知道这个的目的。 ⚡选择器---多 我们可以给一个标签指定多个,从而达到更多的选择目的。 这些都可以选出这个标签....多开发中使用场景 可以把一些标签元素相同的样式(共同的部分)放到一个里面....⚡id选择器选择器的区别: 选择器(class)好比人的名字,一个人可以有多个名字(外号),同时一个名字也可以被多个人使用。 id 选择器好比人的身份证号码,全中国是唯一的,不得重复。...id 选择器选择器最大的不同在于使用次数上,id属性只能出现一次,可以有多次。

8011
领券