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. getchar（）函数举例

    #include<stdio.h>void main(){ char ch; ch=getchar(); printf("%c",ch);}

  2. 【JQuery】操作前端控件知识笔记

    一.jQuery操作复选框checkbox 1.设置选中.取消选中.获取被选中的值.判断是否选中等 注意:操作checked.disabled.selected属性,强制建议只用prop()方法!!, ...

  3. Kibana 的安装（Windows版本）

    一.安装 安装条件 保证安装了JDK 保证安装node 保证安装了Elasticsearch 1.点击kibana官网下载  [kibana的版本和elasticsearch的版本和必须一致] 2.修 ...

  4. cube.js 学习（六）cube.js segments 说明

    segments 是你需要查询的数据的子集,实际上filter 也可以做类似的事情,但是,目前这个设计估计是为了更好的数据 查询吧,同时在操作界面上我们也可以看出来 参考格式 segments: { ...

  5. 洛谷 P3979 遥远的国度

    题目描述 修改某条路径上的值以及询问子树的最小值都最树剖的基础操作,那么如何实现换根呢? 考虑一下三种情况: 1.rot=询问的子树x,答案就是整棵树的最小值 2.rot在x的子树里,只有rot到x这 ...

  6. TP5.1框架最后登录时间不会更新

      最后登录时间:2019-5-1 14:44 发现系统管理员时间总是停留在这个时间,后来才发现原来是时间没有自动更新. 手册地址:https://www.kancloud.cn/manual/thi ...

  7. 新零售下的 AI智能货柜

    公司有个智能货柜,通过微信扫码开门,拿货,自动扣款,挺智能的.还不错.研究一下原理,网上查了一下. 文章简介: 目前新零售风刮的蛮大,笔者进入该领域近一年,负责过无人便利店.智能货柜.智慧商超等产品, ...

  8. 【Json】Json分词器

    package com.hy; import java.io.BufferedReader; import java.io.FileInputStream; import java.io.FileNo ...

  9. Ubuntu16.04下升级Python到3.6.5

    本文链接:https://blog.csdn.net/chaiyu2002/article/details/82698376原帖存于IT老兵博客.Ubuntu16.04下升级Python到3.6.5 ...

  10. C#读取Word指定页的内容

    /// <summary> /// Word按页读取内容 /// </summary> /// <param name="page">页数< ...