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. spring-data-jpa一对多多对一多对多关联

    一对多.多对一 Country类 @Entity @Table(name = "Country") public class Country { @Id //sequence id ...

  2. Luogu P3391 【模板】文艺平衡树 Splay 平衡树

    https://www.luogu.org/problemnew/show/P3391 以前写过题解的入门题重写练板子.wdnmd真就 ' == ' 写成 ' = ' 了编译器不报错呗. #inclu ...

  3. COGS 1583. [POJ3237]树的维护

    二次联通门 : COGS 1583. [POJ3237]树的维护 /* COGS 1583. [POJ3237]树的维护 树链剖分 + 边权化点权 线段树 单点修改 + 区间取相反数 + 查询区间最大 ...

  4. Day15:大前端

    垂直水平居中 css: display: table-cell; text-align: center; vertical-align: middle; div: display: inline-bl ...

  5. Pytest权威教程26-示例和自定义技巧

    目录 示例和自定义技巧 返回: Pytest权威教程 示例和自定义技巧 这是一个(不断增长的)示例列表.如果你需要更多示例或有疑问,请联系我们.另请参阅包含许多示例代码段的 综合文档.此外,stack ...

  6. [NOI.AC]NOI2019省选模拟赛 第二场

    传送门 Solution A. 一共有\(T\)组数据 每次询问你\([l,r]\)中有多少个数能被他的所有数位整除(如果数位中含有\(0\)忽略掉) 数位dp,咕咕咕 B. 题面略 考虑一个个只有两 ...

  7. SpringCloud：Eureka服务注册与发现

    1.Eureka简介 Spring Cloud 封装了 Netflix 公司开发的 Eureka 模块来实现服务注册和发现(请对比Zookeeper). Eureka 采用了 C-S 的设计架构.Eu ...

  8. docker中部署django项目~~Dockfile方式和compose方式

    1.  背景:   本机win10上,后端django框架代码与前端vue框架代码联调通过. 2.  目的:   在centos7系统服务器上使用docker容器部署该项目. 3.  方案一:仅使用基 ...

  9. NAT+PAT+OSPF+设备互连地址详解

  10. SQL中的xp_cmdshell拒绝访问

    数据库备份作业的sql,,最后一步删除指定时间之前的文件夹.. 使用 xp_cmdshell 函数调用  RMDIR 命令删除过期文件夹,但返回拒绝访问.. 代码如下: DECLARE @PATH2 ...