HTML中设置了多个class属性的优先级

问题:

        在使用layui 要定义select背景颜色的时候,自定义的class中设置的背景颜色老是没有效果!

        我是这样定义的

<select lay-ignore class="black layui-input" name="color" id="color" style="width: 60px">

        我在想不是俩个class的前后顺序反了使得我.black中的背景颜色没覆盖layui-input的背景颜色,于是我改成

<select lay-ignore class="black layui-input" name="color" id="color" style="width: 60px">

      发现一样没有效果!!!!

解决:

      于是百度了好久

      发现是我在连接外部样式表的顺序问题!!!

<script type="text/javascript" src='{$Think.const.JS_URL}/jQuery.js'></script>
<link rel="stylesheet" type="text/css" href='{$Think.const.CSS_URL}/style.css'>    
<link rel="stylesheet" type="text/css" href="{$Think.const.LAYUI_URL}/css/layui.css">   
<script type="text/javascript" src="{$Think.const.LAYUI_URL}/layui.js"></script>

    layui.css样式表在style.css后加载,所以layui的样式会覆盖我的style样式表,改成一下顺序就可以了!我吐了,菜是原罪?

<script type="text/javascript" src='{$Think.const.JS_URL}/jQuery.js'></script>
<link rel="stylesheet" type="text/css" href="{$Think.const.LAYUI_URL}/css/layui.css">   
<link rel="stylesheet" type="text/css" href='{$Think.const.CSS_URL}/style.css'>
<script type="text/javascript" src="{$Think.const.LAYUI_URL}/layui.js"></script>

 

 

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML、CSS(层叠样式表)和它们元素之间的优先级是一个常见的前端开发者关注点。在处理样式的冲突或确定元素最终呈现样式的顺序时,理解它们的优先级规则至关重要。 1. **内联样式**:最优先级高的是直接应用于 HTML 元素内的 `style` 属性。这些样式具有最高的优先级。 ```html <div style="color: red;">Hello, World!</div> ``` 2. **ID选择器**:紧跟其后的是使用 `#id` 选取的样式,如 `#myElement { color: blue; }`。如果多个样式都应用到了同一个元素上,ID选择器优于类选择器。 3. **类选择器和属性选择器**:接下来是 `.class`, `[attribute=value]`, 和 `[type=radio|checkbox]` 的样式。如果有多条这样的规则,浏览器会选择第一个匹配到的规则。 ```css .classname { color: green; } [type=text] { color: purple; } ``` 4. **元素选择器**:通用选择器(如 * 或者 element),内嵌选择器(如 div p),以及后代选择器 (`parent > child`) 的优先级相同,但如果有多个匹配项,会从文档根部开始向子元素逐级查找,直到找到第一个匹配的样式。 5. **继承**:默认情况下,元素会继承父元素的一些样式,除非被明确覆盖。 6. **CSS链式法则**:当存在嵌套结构时,外部元素的样式会影响内部元素,这被称为CSS的“就近原则”。然而,如果内部元素有自己的样式声明,那些样式通常会胜出。 7. **!important**:`!important` 可用于任何一个 CSS 规则,将它的优先级提升至最高,即使在嵌套和继承优先于其他所有规则。 8. **外联样式表(外部CSS文件)**:最后,链接到网页的外部CSS文件的规则会被认为是最后的来源,但只有在内部样式和ID/类选择器没有匹配项时才会起作用。 理解这些优先级有助于编写可维护和高效的CSS代码。如果你遇到样式冲突,可以通过检查选择器的特性和位置来解决。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值