1、选择器优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
    <style>
    .a1 {color: red}
    .a2 { color: yellow}
    .a3 { color: green;}
    </style>
</head>
<body>
    <div class="a1 a4 a3 a2">hello</div>
</body>
</html>
// style.css

.a4 { color: blue;}

结论是a3起效，这和class先后使用顺序没关，和css样式先后定义顺序有关，a3是最后定义的，会覆盖前面的样式。

css代码陷阱的更多相关文章

  1. CssStats – 分析和优化网站 CSS 代码的利器

    CssStats 是一个在线的 CSS 代码分析工具,你只需要输入网址或者直接 CSS 地址即可进行 CSS 代码的全方位分析,是前端开发人员和网页设计师分析网站 CSS 代码的利器,可以统计出 CS ...

  2. Less:优雅的写CSS代码

    css是不能够定义变量的,也不能嵌套.它没有编程语言的特性.在项目开发中,常常发现有很多css代码是相同的,但我们通常都是复制然后粘贴. 举个例子:假设h5应用里主题色是#FF3A6D,可能用于文字或 ...

  3. 我的页面定制CSS代码（SimpleGamboge皮肤）

    我的页面定制CSS代码,针对博客园SimpleGamboge皮肤. 调整: 1.左上图片更换为自己的头像 2.扩大左侧栏宽度,缩小右侧主栏宽度宽度 3.扩大内容页面的评论区宽度,工具图标靠左 4.去广 ...

  4. CSS 代码技巧与维护 ★ Mozilla Hacks – the Web developer blog

    原文链接:https://hacks.mozilla.org/2016/05/css-coding-techniques/ 译文链接 :http://www.zcfy.cc/article/css-c ...

  5. 实用的60个CSS代码片段

    1.垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑: .verticalcenter{ position: re ...

  6. HTML+CSS代码橙色导航菜单

    效果预览:http://hovertree.com/code/texiao/ks63r6aq.htm <!DOCTYPE html> <html xmlns="http:/ ...

  7. 兼容性背景颜色半透明CSS代码（不影响内部子元素）

    如何简单兼容性的实现父元素是半透明背景色,而子元素不受影响. 兼容所有浏览器的背景颜色半透明CSS代码: background-color: rgba(, , , .); filter: progid ...

  8. 20个编写现代 CSS 代码的建议

    明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较 ...

  9. [No00007B]DreamweaverCC 的CSS代码格式化

    Dreamweaver自带的代码格式化功能. 1.步骤:命令 -> 应用源格式. 2.你可以选择你的偏好.特别是css代码,有些人喜欢每个属性单独一行,有些人喜欢把所有属性写在同一行.步骤:编辑 ...

随机推荐

  1. HTML5自定义属性操作

    一.自定义属性(html5标准)data-属性名称="属性值" 自定义属性的名称驼峰式命名规则需要用-隔开 自定义属性名称如果连在一起写,大写会自动转为小写 data-user=& ...

  2. 洛谷P1039侦探推理题解

    #include<cstdio> #include<cstring> #include<string> #include<iostream> using ...

  3. js将数组分割成等长数组

    方法一: function group(array, subGroupLength) { let index = 0; let newArray = []; while(index < arra ...

  4. Visual Detail Augmented Mapping for Small Aerial Target Detection（航片动态小目标检测）

    1.介绍 航片里小目标占总像元数不足1%,普通目标检测算法如YOLO会有很多错误,主要原因有3点: 1.航片的无关背景占多数 2.目标大小由于飞行高度和拍摄角度不同 3.航片中的小移动目标和噪音会混淆 ...

  5. BAT 按文件修改日期自动建立日期文件夹并移动

    @ECHO OFF&setlocal enabledelayedexpansion@rem 第二行的路径可以改成源目录路径,然后将BAT放源目录外执行.否则这个BAT文件也会被分类.@rem ...

  6. Nginx介绍和使用

    Nginx介绍和使用 一.介绍 Nginx是一个十分轻量级并且高性能HTTP和反向代理服务器,同样也是一个IMAP/POP3/SMTP代理服务器. 二.特性 HTTP服务器 反向代理服务器 简单的负载 ...

  7. 腾讯云CENTOS7安装MSSQL2017

    腾讯云CENTOS7安装MSSQL2017 mkdir -p /opt/sqlserver2017cd /opt/sqlserver2017/ 下载离线包:wget https://packages. ...

  8. 文献阅读 - Genome-wide consequences of deleting any single gene

    现在在做单基因敲除后的转录组数据分析,一个显而易见却又百思不得其解的问题出现了: 为什么敲掉一个基因会导致其他那么多基因的表达发生了变化,甚至是其他很多调控基因(转录因子)? 我敲掉的只是一个普通基因 ...

  9. Mysql中如何查看慢查询以及查看线程

    一.MySQL数据库有几个配置选项可以帮助我们及时捕获低效SQL语句 1,slow_query_log这个参数设置为ON,可以捕获执行时间超过一定数值的SQL语句. 2,long_query_time ...

  10. oracle 删除某个用户下的所有对象

    先存放好dropobj.sql 文件 然后登录需要删除的用户 删除前最好备份一下:(备份是在cmd中进行的) C:\Users\panfu>exp file=d:\expall.dmp log= ...