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. Java switch语句使用注意事项

    1.多个case后面的值不可以重复 2.switch后面小括号的数据类型(case 后面的数值类型)只能是以下类型 基本数据类型: byte / short / char / int 引用数据类型:S ...

  2. PHPstorm不停Indexing最新解决办法

    PHPstorm不停Indexing最新解决办法   1.网络上千篇一律的解决办法 File -> Invalidate Caches / Restart... -> Invalidate ...

  3. Processing玩抠图

    突然兴起想玩一下抠图,试着用自带的Example\video来改,花了一个中午做了个小样: 分别是白色为底与黑色为底的效果,代码如下: import processing.video.*; int n ...

  4. Comet OJ - Contest #8题解

    传送门 \(A\) 咕咕咕 const int N=1005; char s[N][N];int len[N],n,id; inline bool cmp(R int j,R int k){ R in ...

  5. Code Chef JUNE Challenge 2019题解

    题面 \(SUMAGCD\) 先去重,易知答案一定是一个数单独一组剩下的一组,前缀后缀\(gcd\)一下就行了 //quming #include<bits/stdc++.h> #defi ...

  6. PHP查询oracle数据显示乱码问题

    1.Linux下 执行前脚本前先执行一下命令export NLS_LANG="SIMPLIFIED CHINESE_CHINA.AL32UTF8" 2.Windows下在代码里添加 ...

  7. linux 使用yum安装mysql详细步骤

    环境:Centos 6.5 Linux 使用yum命令安装mysql 1. 先检查系统是否装有mysql [root@localhost ~]#yum list installed mysql* [r ...

  8. loadRunner目录分析<二>

    loadRunner是用C语言进行编写的所以很多文件都是以.h文件结尾的 挑选一部分关键目录结构进行说明 1.analysis templates --分析模板,案例模板 2.bin --可执行程序, ...

  9. elasticsearch x-pack license过期

    1.注册一个新的license,每一项都要填写,每次可以使用一年,一年到期后再来注册一个新的 2.更新license (官方文档:https://www.elastic.co/guide/en/x-p ...

  10. Apollo的基本使用及常见问题

    1. 创建项目 在创建项目页面中填写相关项目信息,最后点击提交即可创建项目. 注意:应用Id必须唯一并且与客户配置的app.id一致. 2. 发布 进入对应项目可通过文本(批量)或者表格模式添加配置, ...