css代码陷阱
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代码陷阱的更多相关文章
- CssStats – 分析和优化网站 CSS 代码的利器
CssStats 是一个在线的 CSS 代码分析工具,你只需要输入网址或者直接 CSS 地址即可进行 CSS 代码的全方位分析,是前端开发人员和网页设计师分析网站 CSS 代码的利器,可以统计出 CS ...
- Less:优雅的写CSS代码
css是不能够定义变量的,也不能嵌套.它没有编程语言的特性.在项目开发中,常常发现有很多css代码是相同的,但我们通常都是复制然后粘贴. 举个例子:假设h5应用里主题色是#FF3A6D,可能用于文字或 ...
- 我的页面定制CSS代码（SimpleGamboge皮肤）
我的页面定制CSS代码,针对博客园SimpleGamboge皮肤. 调整: 1.左上图片更换为自己的头像 2.扩大左侧栏宽度,缩小右侧主栏宽度宽度 3.扩大内容页面的评论区宽度,工具图标靠左 4.去广 ...
- CSS 代码技巧与维护 ★ Mozilla Hacks – the Web developer blog
原文链接:https://hacks.mozilla.org/2016/05/css-coding-techniques/ 译文链接 :http://www.zcfy.cc/article/css-c ...
- 实用的60个CSS代码片段
1.垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑: .verticalcenter{ position: re ...
- HTML+CSS代码橙色导航菜单
效果预览:http://hovertree.com/code/texiao/ks63r6aq.htm <!DOCTYPE html> <html xmlns="http:/ ...
- 兼容性背景颜色半透明CSS代码（不影响内部子元素）
如何简单兼容性的实现父元素是半透明背景色,而子元素不受影响. 兼容所有浏览器的背景颜色半透明CSS代码: background-color: rgba(, , , .); filter: progid ...
- 20个编写现代 CSS 代码的建议
明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较 ...
- [No00007B]DreamweaverCC 的CSS代码格式化
Dreamweaver自带的代码格式化功能. 1.步骤:命令 -> 应用源格式. 2.你可以选择你的偏好.特别是css代码,有些人喜欢每个属性单独一行,有些人喜欢把所有属性写在同一行.步骤:编辑 ...
随机推荐
- LightOJ - 1323 - Billiard Balls(模拟）
链接: https://vjudge.net/problem/LightOJ-1323 题意: You are given a rectangular billiard board, L and W ...
- Java实现数组元素反转
package com.fgy.demo; /** * 数组元素反转 */ public class demo05 { public static void main(String[] args) { ...
- luogu T96516 [DBOI2019]持盾 可持久化线段树+查分
因为题中的操作是区间加法,所以满足前缀相减性. 而每一次查询的时候还是单点查询,所以直接用可持久化线段树维护差分数组,然后查一个前缀和就行了. code: #include <bits/stdc ...
- learning java AWT widowEvent and MouseEvent
import java.awt.*; import java.awt.event.MouseEvent; import java.awt.event.MouseListener; import jav ...
- C 指针常量 和常量指针 指向常量的指针常量的使用
#include <stdio.h> /* 指针常量 和常量指针 指向常量的指针常量 */ int main() { int a = 100; int b =200; int* const ...
- python 格式化输出之%号
一.格式化输出1.整数的输出%o —— oct 八进制%d —— dec 十进制%x —— hex 十六进制 1 >>> print('%o' % 20) 2 24 3 >&g ...
- GO语言html模板
模板 一个模板是一个字符串或一个文件,里面包含了一个或多个由双花括号包含的{{action}}对象.大部分的字符串只是按面值打印,但是对于actions部分将触发其它的行为.每个actions都包含了 ...
- IIS错误代码500.21 ，Nhibernate更新报错，委托的使用。action传参数
快速阅读 IIS错误代码500.21 ,Nhibernate更新报错,委托的使用.action传参数 IIS错误代码500.21 HTTP 错误 500.21 - Internal Server Er ...
- UML图中时序图的基本用法
快速阅读 序列图主要用来更直观的表现各个对象交互的时间顺序,将体现的重点放在 以时间为参照,各个对象发送.接收消息,处理消息,返回消息的 时间流程顺序,也称为时序图. 里面用到的基本元素如下: 角色- ...
- 已知 sqrt (2)约等于 1.414，要求不用数学库，求 sqrt (2)精确到小数点后 10 位
问题:已知 sqrt (2)约等于 1.414,要求不用数学库,求 sqrt (2)精确到小数点后 10 位. 出题人:阿里巴巴出题专家:文景/阿里云 CDN 资深技术专家. 考察点:基础算法的灵活应 ...