如何指定CSS类的顺序?

2023-12-05

我对 CSS 和class属性。我一直认为,我在属性值中指定多个类的顺序是有意义的。后面的类可以/应该覆盖前面的定义,但这似乎不起作用。这是一个例子:

<html>
<head>
<style type="text/css">
    .extra {
        color: #00529B;
        border:1px solid #00529B; /* Blue */
        background-color: #BDE5F8;
    }

    .basic {
           border: 1px solid #ABABAB;
    }
</style>
</head>
<body>
    <input type="text" value="basic" class="basic"/>
    <input type="text" value="extra" class="extra"/>
    <input type="text" value="basic extra" class="basic extra"/>
    <input type="text" value="extra basic" class="extra basic"/>
</body>
</html>

我期望第三个例子class="basic extra"应该有一个蓝色边框,因为额外指定的边框会覆盖基本边框。

我在 ubuntu 9.04 上使用 FF 3


属性被覆盖的顺序并不由类在类中定义的顺序决定。class属性,而是它们出现在 CSS 中的位置。

.myClass1 {color:red;}
.myClass2 {color:green;}
<div class="myClass2 myClass1">Text goes here</div>

中的文字div会出现green, 并不是red;因为.myClass2CSS 定义中的位置比.myClass1。如果我要交换类名的顺序class属性,什么都不会改变。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何指定CSS类的顺序? 的相关文章

  • 获取要在新浏览器中显示的选择值

    嘿 基本上这是我的代码 运行的第一个脚本允许在 URL 中显示所选值
  • 聚合物纸下拉菜单在浏览器中未正确呈现

    我对简单的纸张下拉菜单的渲染 html 遇到问题 列表项并不显示为样式化的 菜单 而只是出现在页面上的项目列表 单击渲染的纸张输入组件 渲染的下拉列表的一部分 确实会为波纹设置动画 但不会为菜单和菜单项的显示 隐藏设置动画 单击列表中的某个
  • Bootstrap 4 行布局没有响应

    我正在使用 Bootstrap 4 在 MEAN 堆栈上为新闻文章布局创建一个 html 模板 但这应该不重要 对于这种总体布局的要求是 一篇 特色 文章位于其自己的列中 而其他 8 篇文章位于另一列中的两行中 当在较小的屏幕或移动设备上查
  • 我可以在一个变量中拥有多个值吗?

    正如标题 我可以在一个变量中拥有多个值吗 首先 我有这个表格
  • 文本区域值高度[重复]

    这个问题在这里已经有答案了 我有一个 textarea 其 css 高度设置为 85px 用户可能会在该文本区域内键入内容行 我想知道文本 值的高度 而不是文本区域本身 有没有办法检查内部文本的高度 包括换行符 我会将文本区域的内容复制到另
  • CSS:仅背景不透明度,而不是内部文本[重复]

    这个问题在这里已经有答案了 我有这个注册表框 我真的很喜欢背景如何变得不透明 透明为 25 85 但后来我注意到文本和表单元素也变暗了一点 所以我想知道如何做到这一点只有边框和背景而不是盒子里面的东西 regForm z index 11
  • 将 html 源拆分为多个文件

    HTML 是否支持将源代码拆分为多个文件 我正在寻找 C 的等价物 include 或者也许是类似 C 的东西partial 可以采用源路径并在该位置注入文件内容的元素 如果之前有人问过这个问题 我们深表歉意 Google 和 SO 搜索没
  • CSS flex-basis: 0% 与 flex-basis: 0px 有不同的行为

    根据MDN https developer mozilla org en US docs Web CSS flex the flex 1应设置简写flex basis 0 然而 它实际上设置了flex basis 0 更令人惊讶的是 这有不
  • 未使用 Font Family Open Sans

    我在用谷歌的 Open Sans 字体 http www google com fonts UsePlace use Collection Open Sans在我的应用程序中 我已经按照指示定义了样式表 然后我在主体选择器上使用它 body
  • 使用过渡添加子项时 div 的平滑增长

    尽管使用了以下代码 但其行为并不符合我的预期transition所以可能有些事情我不明白 理想情况下 单击该按钮会将一个子项添加到id2div 并制作id1分区增长smoothly因此 function id1 button click g
  • 调整大小后获取实际图像大小

    我有一个充满缩略图的页面 用 css 调整大小150x150 当我单击缩略图时 页面变暗 并且图像以其真实尺寸显示 目前 我必须手动创建一个包含所有图像的实际高度的数组 为了解决设计问题 减少画廊的手动操作 我需要在调整图像大小 CSS 后
  • 使用时间序列数据和scaleBand指定D3条形图上的刻度

    我尝试为具有时间序列数据的 d3 v4 条形图指定多个刻度和多个刻度标签 如下图所示 基于本教程 https bl ocks org zigahertz 1ee4965ff76514517bb7ce6af21e5d44我有一个处理时间序列数
  • 如何使单词中的每个字母在悬停时发生变化

    假设我的网站上某个段落中有一个单词 IamGreat 我希望它在悬停时更改为 Good4you 但是 我不想更改整个单词 而是希望每个字母单独更改 因此 如果我将鼠标悬停在字母 I 上 它将变成字母 G 字母 r 将变成数字 4 等 这两个
  • 等待动态加载脚本

    在我的页面正文中 我需要插入以下代码作为 AJAX 调用的结果 p Loading jQuery p p Using jQuery p 我不能使用 load 由于文档已经加载 因此该事件不会触发 这安全吗 如果没有 我如何确保在执行自定义生
  • LESS CSS 在媒体查询中设置变量?

    我正在开发一个专门针对 iPad 的网站 为了使我的网站能够在视网膜显示屏 iPad 和旧版本 iPad 上运行 我想在媒体查询中的 LESS CSS 中设置一个变量 例如 media all and max width 768px rat
  • 向 Twitter Bootstrap 添加新字体系列

    我怎样才能按照他们的方式将新的字体系列添加到 twitter bootstrap 中 他们使用一种叫做 woff 的东西 我正在尝试将 roboto 添加到 css 文件中 我怎样才能像他们那样做 woff 的事情呢 font face f
  • 如何使网站适应用户的屏幕分辨率?

    我正在使用 1024x768 屏幕分辨率来设计我的网站 当您从屏幕分辨率较小 较大的计算机上的浏览器中查看网站时 网站开始变形 无论用户的屏幕分辨率是什么 如何使网站适应用户的屏幕分辨率 我相信通过 JavaScript 或 CSS 是可能
  • Chrome 上的 contenteditable 中未显示编辑光标

    当您打开此页面时 请参阅现场演示 http jsfiddle net gs3p1a6r 3 show 与 Chrome span span CSS myspan border 0 outline 0 JS myspan focus the
  • HTML标题属性样式[重复]

    这个问题在这里已经有答案了 如何在不使用 javascript 或 CSS 的情况下更改以下标记中标题属性的样式 因为我将 HTML 插入到原本无法编辑的文档中的特定位置 span title This is information Thi
  • CSS3 背景渐变未验证,有人可以告诉我为什么吗?里面的代码示例

    有人能告诉我为什么下面的 css 没有验证吗 我一直在尝试自己研究这个问题 但没有运气 我读过的所有文档都说这是在 css3 中进行渐变的正确原因 header color white font size 12px font family

随机推荐

  • 根据国家/地区获取货币符号

    我有一个显示货币的 TextView 默认情况下 我的文本视图的文本是 0 00我怎样才能做到这样 根据用户选择而变化 我有以下代码 Locale locale new Locale en US Currency currency Curr
  • 类是结构体还是结构体指针

    如果我没记错的话 结构意味着对象 结构指针意味着指向对象的指针 对吗 在一篇文章中 它说类是结构 这意味着它们是对象 Filter the list of all classes The traditional definition of
  • 从 Facebook 获取电子邮件 - FB android SDK

    我使用以下代码从 Facebook 获取用户的电子邮件和姓名 protected void onCreate Bundle savedInstanceState Display page setContentView R layout ac
  • 致命错误:sys/socket.h:32位上没有这样的文件或目录

    当使用 32 位编译我的程序时 gcc m32 program c o program 我收到以下错误致命错误 sys socket h 没有这样的文件或目录 但与 gcc program c o program 效果很好 有什么解决方法吗
  • KSoap2 和 KvmSerialized - 如何发送复杂的对象,如 Stringarrays

    我想将一个复杂的对象从我的 Ksoap 客户端发送到我的 Web 服务 它是我的类别类别的一个对象 该代码基于本教程的示例 http seesharpgears blogspot de 2010 10 ksoap android web s
  • 如何在Hive中获取数组中的前n个元素

    我使用 split 函数在 Hive 中创建一个数组 如何从数组中获取前 n 个元素 并且我想遍历子数组 代码示例 select col1 from table where split col2 0 5 0 5 看起来像 python 风格
  • 如何找到符号的完全限定名称空间?

    如果我有一个符号 其名称空间是别名 例如 q w 我如何找到它的实际名称空间 例如actual namespace w 我知道resolve会给我完全限定的 var 但我不知道如何获取 var 的命名空间 我能做的最好的事情就是 defn
  • MATLAB 中的矩阵运算

    我正在尝试简化我的代码 但遇到了一个小问题 让 v 1 2 3 a1 4 5 6 a2 7 8 9 A a1 a2 我的目标是计算 u v a1 v a2 仅使用v一度 这可能吗 是的 你可以使用bsxfun 例如 u bsxfun tim
  • `use std::io::Result as IOResult;` 比 `use std::io;` 仅仅引用 Rust 中的 `io::Result` 更高效吗?

    在学习 Rust 的过程中 我看到了人们导入库的多种方式 例如std io Result 例如 use std io Result as IOResult and pub type IOResult
  • R 中的表情符号 [UTF-8 编码]

    我正在尝试对 R 进行表情符号分析 我存储了一些带有表情符号的推文 这是我要分析的推文之一 gt tweetn2 1 Programme du week end xed xa0 xbd xed xb2 x83 xed xa0 xbc xed
  • Rails 迁移抱怨使用回形针的未定义方法“附件”

    Lemmie 在开头说我对 Rails 还很陌生 我们的应用程序使用回形针 3 2 4 来管理附件 像往常一样 我生成了一个类似于以下内容的迁移 class AddAttachmentPhotoToPhpfoxUsers lt Active
  • 是否有必要在 C# 中显式删除事件处理程序

    我有一堂课提供一些活动 该类是全局声明的 但不是在该全局声明上实例化的 它是根据需要在需要它的方法中实例化的 每次方法中需要该类时 都会对其进行实例化并注册事件处理程序 在方法超出范围之前是否有必要显式删除事件处理程序 当方法超出范围时 类
  • 为 Windows 上的 Lua 构建 lua 文件系统

    我对构建 makefile 没有任何线索 我正在尝试在 Windows 7 x86 中构建 luafilesystem 以便与 Lua for Windows 一起使用 我已经在互联网上搜索了教程 但我就是无法弄清楚 我在开发人员命令提示符
  • 如何使用 UIImagePickerController 显示所有相机控件?

    使用 UIImagePickerController 时 我无法显示相机控件 具体来说 我需要能够在慢动作 视频 照片 方形和全景之间进行选择 我使用的代码的基本部分是 UIImagePickerController pc UIImageP
  • 从 C# 修改任何窗口的不透明度

    是否可以从 C 修改所有打开的窗口的不透明度 我在 google 上搜索了最小化窗口 我发现这可以通过 pInvoke 调用实现 它甚至起作用了 同样 是否可以从 C 更改所有打开的窗口的不透明度 另外 我不喜欢 MFC 的东西 还有什么工
  • 测量执行单个指令的时间

    有没有办法使用 C 或汇编程序甚至 C 来准确测量执行 ADD 指令所需的时间 是的 有点 但它并不平凡 并且产生的结果是almost毫无意义 至少在最现代的处理器上是这样 在相对较慢的处理器上 例如 从英特尔系列中的原始奔腾处理器开始 在
  • 将 tf.keras.utils.image_dataset_from_directory 与标签列表一起使用

    我有目录示例中相应数量的文件的标签列表 1 2 3 train ds tf keras utils image dataset from directory train path label mode int labels train la
  • raw 文件夹中文本文件中的除号

    我的 android 的 txt 文件中有 当这个除法符号显示在 Android 设备上时 我看到 更糟糕的是 我的笔记本电脑键盘上没有除号 我使用了维基百科上的标志 猜猜我该如何解决这个问题 您应该对任何符号 例如此处的除号 使用 Uni
  • 如何使用jquery设置多个CSS显示属性值

    好吧 这让我有点抓狂 我正在使用 jQuery css 方法try设置类所需的多个 Flexbox 显示属性 问题是 它只保留最后一个 关于如何使用 jQuery 执行此操作的任何想法 或者这是不可能的 到目前为止 这是我尝试过的 depa
  • 如何指定CSS类的顺序?

    我对 CSS 和class属性 我一直认为 我在属性值中指定多个类的顺序是有意义的 后面的类可以 应该覆盖前面的定义 但这似乎不起作用 这是一个例子