热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

如何使用相同的名称类,但使用不同的样式

如何解决《如何使用相同的名称类,但使用不同的样式》经验,为你挑选了1个好方法。

看到例子来理解:

    
    

    
    

所以我想要一个类似的东西:

    
Standard Bootstrap Button
Material Design Bootstrap Button

类的名称是相同的.但它们分为两种不同的风格.我怎么能像我说的那样使用这两种款式?

请原谅我糟糕的英语.



1> CodeHacker..:

你不能,你将永远得到班级的最后定义.这就是样式表的工作方式,这就是为什么它们被称为CASCADING Stylesheets.所以基本上你在mdb.min.css中定义的内容扩展或覆盖了bootstrap.min.css中定义的内容而你将获得两者的组合

让我们在bootstrap.min.css中说你有这个:

btn-danger:{
   color:#FF0000;
   width:100px;
}

在mdb.min.cs你有

btn-danger:{
   background-color:#00FF00;
   width:120px;
}

您的浏览器会解释这个:

btn-danger:{
   color:#FF0000;
   background-color:#00FF00;
   width:120px;
}

宽度将被mdb.min.css覆盖,因为最后添加了一个,后面添加样式表,它的优先级越高,因此它将覆盖之前定义的所有内容,并扩展尚未定义的所有内容.更早,并合并其他一切


推荐阅读
  • CSSandSass(SCSS)stylerulesIDandclassnamingID和class(类)名总是使用可以反应元素目的和用途的名称,或其他通用名称。代替表象和 ... [详细]
  • 本文主要分享【】,技术文章【SassScss、Less是什么?】为【CRMEB】投稿,如果你遇到CRMEB,学习笔记相关问题,本文相关知识或能到你。Sass(SyntacticallyAw ... [详细]
  • 首先要说sass和scss的区别。sass之前是缩进的语法,有点像python和jade那样,写起来有点不方便,所以后来兼容了css的写法,就变成了scss。sass支持函数,循环,each,mixi ... [详细]
  • Webpack5内置处理图片资源的配置方法
    本文介绍了在Webpack5中处理图片资源的配置方法。在Webpack4中,我们需要使用file-loader和url-loader来处理图片资源,但是在Webpack5中,这两个Loader的功能已经被内置到Webpack中,我们只需要简单配置即可实现图片资源的处理。本文还介绍了一些常用的配置方法,如匹配不同类型的图片文件、设置输出路径等。通过本文的学习,读者可以快速掌握Webpack5处理图片资源的方法。 ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • 程序员如何选择机械键盘轴体?红轴和茶轴对比
    本文介绍了程序员如何选择机械键盘轴体,特别是红轴和茶轴的对比。同时还介绍了U盘安装Linux镜像的步骤,以及在Linux系统中安装软件的命令行操作。此外,还介绍了nodejs和npm的安装方法,以及在VSCode中安装和配置常用插件的方法。最后,还介绍了如何在GitHub上配置SSH密钥和git的基本配置。 ... [详细]
  • CSS制作框架Sass 3.4.4有哪些优点
    这篇文章主要讲解了“CSS制作框架Sass3.4.4有哪些优点”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究 ... [详细]
  • 我正在为网站创建自定义光标。当鼠标移动时,我有两个div居中于光标,但是当 ... [详细]
  • 侧边工具条实现 scss+requirejs(1)
    慕课上的一个案例,刚刚学完scss然后找到了这个课程复习一下。顺便老师教了一下requirejs的使用。这可是我的第一个组件啊,拖了好久好久哦。三种html的布局以及优缺点:+ ... [详细]
  • 1.什么是预处理器?  CSS预处理器是用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,以供项目使用。CSS预处理器为CSS增加一些编程的特性,无需考虑浏览器的兼容性问题。 ... [详细]
  • vue使用Sass时出现报错问题如何解决
    本篇文章为大家展示了vue使用Sass时出现报错问题如何解决,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获 ... [详细]
  • 讓我們斟酌下場景:當運用remvw開闢挪動端的時刻,你定義了一個px轉rem的函數,或許是網站配色的全局變量等,然後到工程里為每一個vue文件或許組件@import‘publicf ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • 本文讨论了在使用Git进行版本控制时,如何提供类似CVS中自动增加版本号的功能。作者介绍了Git中的其他版本表示方式,如git describe命令,并提供了使用这些表示方式来确定文件更新情况的示例。此外,文章还介绍了启用$Id:$功能的方法,并讨论了一些开发者在使用Git时的需求和使用场景。 ... [详细]
  • GO语言 包 if..else.. for循环 switch 数组
    包1.什么是包1.新建一个文件夹,内部写很多go文件,但是包名必须一致,改文件夹就是一个包2.作用和优点包用于组织Go源代码,提供了更好的可重用性与可读性。由于包提供了代码的封装, ... [详细]
author-avatar
时尚摄影师阿强_331
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有