博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css样式的继承性、层叠性 、优先级
阅读量:6662 次
发布时间:2019-06-25

本文共 1099 字,大约阅读时间需要 3 分钟。

一、css样式的继承性:

作用:给父元素设置一些属性,子元素也可以使用
应用场景:
一般用于设置网页上的一些共性信息,例如网页的文字颜色,字体,文字大小等内容。优化代码,降低工作量
注意点:
1.并不是所有的属性都可以继承,、
只有color/font-/text-/ line开头的属性才能继承;
2.在css的继承中,不仅仅是儿子可以继承,只要是后代
都能继承
3.继承性中的特殊性
3.1 a标签的文字和颜色 和下划线是不能继承父元素的——举例:
          < div>              

我是大标题

我是超链接

我是段落

(上面的代码,只有p继承了div设置的属性,而a标签是不能继承父元素的属性,颜色不会变红,下划线也不会被去掉)

3.2 h标签的文字大小也是不能继承父元素的(见上面代码,<h1>标签中我是大标题不会继承<div>的   font-size:24px;属性,所以需要给<h1>单独写个css样式:h1{font-size:24px;}

应用场景:
一般用于设置网页上的一些共性信息,例如网页的文字颜色,
字体,文字大小灯内容
格式:
body{属性:值;}
 
二、层叠性
比如p标签,给p标签设置id和class类名,选择器上选择p 和p的id或者class类名,设置相同的属性,就是层叠性
 
三、优先级:(三一)
作用:当多个选择器(比如选择p标签和p标签里设置的id或者class昵称),选中同一个标签,并且给同一个标签设置相同的属性时,
如何层叠就优先级来确定。
2.优先级判断的三种方式
2.1 是否直接选中,直接选中指的是直接选中要设置css样式的标签,和标签的id或者class类名。(间接选中就是指的是继承性,比如选择<ul>那里面的li继承ul的属性,就称为继承属性)
如果是间接选中,谁离目标标签比较近就听谁的。
2.2是否是相同的选择器。
如果是相同选择器,那么就是谁写在后面就听谁的。(比如给两个p标签设置css样式
p{color:blue}
p{color:red}
那么就会以第二个p为标准,文字变成红色
 
2.3不同的选择器
如果都是直接选中,并且不是相同类型的选择器,那么就会按照
选择器的优先级来层叠
id>类>标签>通配符>继承>浏览器默认
 
 
权重计算
 
如果选择器里有直接选中和间接选中。哪怕是间接的选择器为id选择器,也会优先实行直接选中的效果

转载于:https://www.cnblogs.com/aoyama/p/10564965.html

你可能感兴趣的文章
为 Neutron 准备物理基础设施(I) - 每天5分钟玩转 OpenStack(75)
查看>>
【实战】Docker入门实践二:Docker服务基本操作 和 测试Hello World
查看>>
新手应该搞明白的java知识
查看>>
全文搜索引擎 ElasticSearch
查看>>
ireport+springMVC生成pdf
查看>>
TCP连接建立(三次握手)
查看>>
Fatal error: Can’t open and lock privilege tables: Table ‘mysql.host’ doesn’t exist 的解决方法...
查看>>
我的友情链接
查看>>
html生成pdf
查看>>
项目进度管理与项目陈本管理
查看>>
LinearLayout的隐藏与显示
查看>>
Android studio使用自定义的格式化文件或者eclipse的格式文件
查看>>
sublime px dp vw换算rem
查看>>
NYOJ 16 矩形嵌套(动态规划)
查看>>
eclipse导入tomcat 8.0x源码
查看>>
shell脚本——爬取域名一级页面元素并判断其可缓存性
查看>>
Linux平台下代理服务器的实现(squid)
查看>>
简单的tab切换
查看>>
yii中文显示
查看>>
四层和七层负载均衡
查看>>