7-4三种方法的优先级
2016-06-19 15:03
239 查看
有的小伙伴问了,如果有一种情况:对于同一个元素我们同时用了三种方法设置css样式,那么哪种方法真正有效呢?在右边编辑器就出现了这种情况
1、使用
2、然后使用
3、最后又使用
但最终你可以观察到“超酷的互联网”这个短词的文本被设置为了
但是嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样,<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面(实际开发中也是这么写的)。感兴趣的小伙伴可以试一下,把它们调换顺序,再看他们的优先级是否变化。
其实总结来说,就是
但注意上面所总结的优先级是有一个前提:内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下,什么是权值呢?在后面的9-2小节中会讲解到。
1、使用
内联式CSS设置“超酷的互联网”文字为
粉色。
2、然后使用
嵌入式CSS来设置文字为
红色。
3、最后又使用
外部式设置文字为
蓝色(style.css文件中设置)。
但最终你可以观察到“超酷的互联网”这个短词的文本被设置为了
粉色。因为这三种样式是有优先级的,记住他们的优先级:
内联式 > 嵌入式 > 外部式
但是嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样,<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面(实际开发中也是这么写的)。感兴趣的小伙伴可以试一下,把它们调换顺序,再看他们的优先级是否变化。
其实总结来说,就是
--就近原则(离被设置元素越近优先级别越高)。
但注意上面所总结的优先级是有一个前提:内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下,什么是权值呢?在后面的9-2小节中会讲解到。
相关文章推荐
- php没有uint64
- (原)Vs中debug和release结果不一致
- Eclipse 中Hibernate tools 的安装和使用
- java RMI远程方法调用编程模型初探
- leetcode 190 Reverse Bits
- 进程通信之共享内存篇
- iOS CFObject和NSObject的相互转换(使用bridge)
- linux若消失了在不正当操作下的文件回复操作
- 7-2嵌入式css样式,写在当前的文件中
- Linux 系统中的硬链接与软链接
- 整型数组里只出现一次的数字--[c语言笔试题]
- 安装linux系统过程中值得记录的内容
- LOOP,LEAVE 语句
- 判断一个单链表是否有环,若有,找出环的入口节点
- Struts2 action的参数传递方式
- Shell练习题
- 7-1内联式css样式,直接写在现有的HTML标签中
- React Native基本语法
- 2016-06-19 NOIP模拟赛
- Java中'&'与、'|'或、'^'异或、'<<'左移位、'>>'右移位