CSS 文件和不需要的覆盖

2024-03-29

我有一个简单的 HTML 页面,它引用了 3 个 CSS 文件。第一个是仅适用于页面的样式表。另外两个是针对两个独特情态动词的样式。这些模态 CSS 文件不是我创建的,它们很高兴被使用分别地在整个网站的其他页面上。

我的问题是,这两个模态 CSS 文件都包含一些常见的选择器,因此它们会弄乱彼此的样式。

我知道解决此问题的最佳方法是获取一个或两个文件并使其选择器唯一。一种方法是为选择器命名空间。

然而,我的问题是,既然我已经深入了解了这个页面,是否有办法在不更改当前模式 CSS 页面的情况下防止这些 CSS 冲突?是否有任何工具可以提供帮助,例如LESS http://lesscss.org?将来防止这种情况的最佳做法是什么?


最好的解决方案确实是根据您的需要重构这些 css 文件。

然而,更简单的解决方案是将样式表包含在这两个第三方 css 文件之后,并重新声明公共选择器的样式,这会自动覆盖以前的设置。

LESS/SASS 是帮助您更快、更舒适地编写 CSS 的优秀工具。我在私人工作中使用 SASS,并且非常推荐它。但他们无法帮助您解决诸如自动取款机之类的问题。

EDIT:

Using !important是可能的,但被认为是坏习惯,因为它的目的是使用户可以用自己的风格覆盖作者风格 http://www.w3.org/TR/CSS2/cascade.html#important-rules。而不是使用!important你应该做的是:

  1. 尽可能避免重复的样式。
  2. if you can't avoid this, try to resolve this by either:
    • 级联(=使用正确的顺序覆盖以前的样式)
    • using 选择器特异性 http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ (W3C-Spec http://www.w3.org/TR/CSS2/cascade.html#specificity).
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS 文件和不需要的覆盖 的相关文章

  • 将下拉按钮和下拉菜单放在中心?

    div class dropup center block div
  • Javascript 放大/缩小到鼠标 x/y 坐标

    我设法让鼠标拖动来滚动div 但是用鼠标放大 缩小不完整 它有效 但我希望鼠标指针将图像保持在该位置并同时缩放它 如下所示 我需要使用scrollBy 将滚动返回到缩放之前的上一点 有人知道该怎么做吗 这是某人制作的小提琴https jsf
  • ReactJS 水平对齐material-ui 元素

    我试图在文本输入旁边有一个单选按钮 这样用户基本上可以输入问题的 答案 并标记一个首选答案 然而 Material UI 将每个都放在自己的行上 这就是我目前所拥有的 div div
  • css 字体 twitter 像关闭按钮一样,我错过了什么?

    twitter 有一个关闭按钮 它是单个字符 x 我需要类似的东西 但是在我检查之后 span x span 我按照 firebug 告诉我的那样创建 css 规则 close button font family Tahoma Arial
  • MVC4 捆绑:由于 css3 功能而缩小失败?

    我想使用 MVC4 捆绑和缩小 但我总是在未缩小的 css 文件中收到此错误消息作为注释 Minification failed Returning unminified contents 534 29 run time error CSS
  • Chrome:网络元素自动移动

    我正在开发一个网络项目 在过去的两周里 我正在进行学期考试 所以我要休息一下 现在 既然他们已经结束了 我又继续我的工作了 但我发现我的一些Web 元素 如按钮 span 在 Chrome 上移动了一些像素 在 IE 和 Mozilla 上
  • Highcharts - 使用选定的饼图切片获得 3D 效果

    在 highcharts 中 我试图使当用户选择或将鼠标悬停在饼图的切片上时 该切片会产生沿 z 轴 朝向用户 上升的效果 我试图通过 css 设置阴影过滤器并使切片的边框更宽 填充颜色相同 来实现此目的 然而 我面临的问题是切片仍然可以位
  • 无限水平滚动图像循环?

    所以我试图在我的网站上创建一个无限滚动动画 但我一直在努力 原始教程在这里 使用 6 张图像 最后重复 4 张图像以实现无缝过渡 https designshack net articles css infinitephotobanner
  • jquery UI datepicker仅月份和年份的css定位问题

    我已经实施了这里讨论的解决方案 JQuery 日期时间选择器 只需选择月份和年份 https stackoverflow com questions 4079525 jquery datetime picker need to pick m
  • 将图例标签设置为块

    我已经在以下网址设置了我的问题的演示 http jsfiddle net YHHg7 4 http jsfiddle net YHHg7 4 我正在尝试执行以下操作 legend display block border bottom 1p
  • 如何计算单击的甜甜圈元素的中点与负 y 轴之间的角度

    Consider the following codesample donut chart using jquery flot http jsfiddle net c5zsg6y3 26 now as i have added the im
  • Android浏览器上的Web应用程序宽度问题

    所以到目前为止我只在 Android 浏览器上遇到过这个问题 基本上我的网站几乎一直运行良好 而且我还没有在 Dolphin Opera 或 Skyfire 上看到这个问题 但偶尔当我从手机主屏幕之一上的书签重新打开 Android 浏览器
  • CSS 选择器:Active 不适用于 IE8 中的子元素单击

    我有以下 HTML 结构 div class wrapper div class control clickable img src logo png div div 以及以下 CSS control border 1px solid 00
  • 在 Chrome 中为

    我已经看到这个问题多次出现 但没有任何明确的解决方案 我正在加载一个简单的视频
  • 在 Chrome 中隐藏 HTML 时间输入字段上的图标

    在 Chrome 中 当您type time 属性到输入框 您会在输入旁边看到一个小图标时钟图标 有没有办法去掉这个小时钟图标 基于这个问题的答案 将日期输入三角形更改为日历图标 https stackoverflow com questi
  • 中有样式表 吗?

    在内部链接 CSS 文件是一个坏主意吗 body 我读过 如果浏览器在外部找到另一个 CSS 文件 则它会被迫重新开始 CSS 渲染 head 只是因为它可能需要将样式应用于已经渲染的元素 另外 我认为 HTML 无法正确验证 我需要确认这
  • 如何使用 jQuery 单击特定链接时打开引导导航选项卡的特定选项卡?

    我是 jquery 和 bootstrap 的新手 所以请考虑我的错误 我已经创建了一个用于登录和注册的 bootstrap 模式 它包含两个导航选项卡 称为登录和注册 我有两个按钮可以弹出相同的模态窗口 但在模态窗口内显示不同的选项卡 每
  • 在javascript中创建图像的缩略图方块(不丢失纵横比)

    我正在制作一个客户端拖放文件上传脚本作为书签 在上传之前 我使用 File API 将图像读取为 base64 格式并将其显示为缩略图 This is how my thumbnails look like I want them to l
  • 使用溢出支持定位粘性填充材料[重复]

    这个问题在这里已经有答案了 我在用position sticky在我的应用程序中 在使用overflow属性来显示滚动条 我已经寻找了一个确实支持这种情况的polyfill 但到目前为止没有任何运气 有谁知道这样的polyfill shim
  • HTML 表格 - 固定列宽和多个可变列宽

    我必须建立一个有 5 列的表 表格宽度是可变的 内容宽度的 50 有些列包含固定大小的按钮 因此这些列应该有一个固定大小 例如 100px 有些列中有文本 所以我希望这些列具有可变的列宽 例如 Column1 tablewidth sum

随机推荐

  • psycopg2 ImportError 的 Django 错误:DLL 加载失败

    您好 当我尝试在虚拟环境中运行syncdb 时 我收到此错误 如果我将 psycopg2 文件夹复制到我的项目文件夹 其中我有manage py and settings py 然后这个错误就消失了 但是当代码推送到heroku时我仍然遇到
  • 导航栏下拉菜单不适用于移动设备

    我在 Bootstrap 3 中遇到了导航栏问题 我的菜单项之一是下拉菜单 它在我的笔记本电脑上运行良好 但在我的 Android 手机上不起作用 具体来说 当按下手机上的下拉菜单项时 没有任何反应 我已经在谷歌 这个网站和其他几个网站上搜
  • 排除子项目提交 Git

    我怎样才能排除Subproject commit 我在子模块中没有更改任何内容 仅从远程存储库中提取更改 我认为在创建子模块时 我在主存储库中提交了一些不需要的东西 有任何想法吗 1 当我创建子模块时git diff在主存储库中还显示 su
  • 如何完成删除文件流和所有附加文件

    我已经在本地数据库上尝试了 MSSQL 2008R2 数据中心 的 FILESTREAM 功能来进行实验 真正的数据库运行在服务器上 我已经使用以下查询设置了整个 FILESTREAM CREATE FILESTREAM AND FILES
  • 在闪亮的仪表板中永久更改标题标题颜色

    我有下面闪亮的仪表板 我需要永久更改包含标题的标题的颜色 现在 当我将鼠标悬停在其上时 它会返回到之前的颜色 library DT ui lt dashboardPage dashboardHeader title Dynamic side
  • Android 6.0 上的 Android 文件权限

    我想列出下面的文件和目录 proc 在安卓中 当作为我的应用程序进程运行时 许多文件不可读 如果我将目录列为shell用户我得到以下输出 shell flounder whoami shell shell flounder system b
  • “永久”SessionFactory、ASP.NET MVC 和 nHibernate

    我一直在使用 Fluent nHibernate ASP NET MVC 构建一个应用程序 我已经深入研究并发现保持 永久 SessionFactory 打开 然后对数据库的每个请求使用会话被认为是最合适的做法 好吧 这听起来不错 不过 我
  • iOS僵尸检测

    在我看来 我的代码中遇到了一个非常困难的问题 它在代码中的不同位置随机崩溃 该项目是一个ARC项目 所以我的程序偶尔会崩溃并显示以下消息 malloc error for object 0xd2dd8b0 incorrect checksu
  • 使用正则表达式计算字符串中的元音

    我刚刚开始学习 JavaScript 却陷入了正则表达式的困境 该程序应该计算输入字符串中元音的数量并显示元音 如果元音没有放在一起 程序运行良好 但如果元音出现在一起 则不会给出正确的值 e g 树 元音将显示为 ee 计数将为 1 Ty
  • RabbitMQ C# API:如何检查绑定是否存在?

    使用 RabbitMQ C API 我如何检查给定队列到给定交换是否存在绑定 很多 RabbitMQ 调用都是幂等的 所以有些人可能会说在这些情况下检查是不必要的 但我认为它们在测试中很有用 您可以使用他们的 REST API 来调用并查看
  • 为什么 sockJS 将“/info”添加到给定的 websocket url 路径

    我想打开一个带有 webapp socket do 路径的 websocket 端口 当我使用 SockJS 并尝试通过代码发起调用时 var socket new SockJS webapp socket do stompClient S
  • sizeof(*ptr) 和 sizeof(struct) 之间的区别

    我尝试了以下程序 struct temp int ab int cd int main int argc char argv struct temp ptr1 printf Sizeof struct temp d n sizeof str
  • Safari 中的 CSS 间距问题?

    我为我的最新项目制作了一个基于列表的导航栏 并在导航的每一侧添加了两个信息栏 它在 Firefox 和 IE 中的表现符合预期 但奇怪的是 Safari 却表现不佳 它在导航栏和右侧信息栏之间留出了很大的空间 CSS body backgr
  • Laravel 雄辩的变异器不适用于更新数据

    我的模型中有用于数据库表字段中的哈希 重新哈希数据的访问器和修改器 例如 public function setFullNameAttribute value this gt attributes full name Helper gete
  • 安装nodejs npm 和 grunt 出现错误

    我不熟悉 Python NodeJS NPM 或 Grunt 但我需要安装它 因为我想尝试一下Github项目 https github com raphaelluchini popcorntime smarttv 我从 node org
  • 如何在 AppFog 中使用 Apache 提供静态内容(WSGI Python 应用程序)

    我在用着AppFog http www appfog comPaaS 系统使用了几天 我喜欢它 它可能是我测试过的最好的 PaaS 系统 我之前使用过其他 3 个 但没有找到有关如何使用 Web 服务器提供静态内容的信息在前端 Apache
  • 从地图中获取一段键

    有没有更简单 更好的方法从 Go 中的映射中获取键的切片 目前我正在迭代地图并将键复制到切片 i 0 keys make int len mymap for k range mymap keys i k i 这是一个老问题 但这是我的两分钱
  • 在 C# 中获取特定时区的日期时间时出现 System.TimeZoneNotFoundException 错误

    我有一个 JSON 文件 其中包含time zone范围 它的值如下London Casablanca Arizona Pacific Time US Canada 等 基于time zone 我想得到DateTime该时区的结果 例如 C
  • Ubuntu 17.04 上 sudo apt-get 更新失败

    运行时sudo apt get update在 ubuntu 17 04 Zesty Zapus 上 我收到以下错误 我已经在错误行上发布了 我想安装 python 库 如 matplotlib 和 tkinter 但由于上述命令未成功运行
  • CSS 文件和不需要的覆盖

    我有一个简单的 HTML 页面 它引用了 3 个 CSS 文件 第一个是仅适用于页面的样式表 另外两个是针对两个独特情态动词的样式 这些模态 CSS 文件不是我创建的 它们很高兴被使用分别地在整个网站的其他页面上 我的问题是 这两个模态 C