文档章节

css样式的继承性、层叠性 、优先级

o
 osc_y8yehimr
发布于 2019/03/20 14:58
字数 758
阅读 11
收藏 0
red

精选30+云产品,助力企业轻松上云!>>>

一、css样式的继承性:

作用:给父元素设置一些属性,子元素也可以使用
应用场景:
一般用于设置网页上的一些共性信息,例如网页的文字颜色,字体,文字大小等内容。优化代码,降低工作量
注意点:
1.并不是所有的属性都可以继承,、
只有color/font-/text-/ line开头的属性才能继承;
2.在css的继承中,不仅仅是儿子可以继承,只要是后代
都能继承
3.继承性中的特殊性
3.1 a标签的文字和颜色 和下划线是不能继承父元素的——举例:
<style type="text/css">
div{
    color:red
   font-size:24px;
    text-decoration: none;
      }
  </style>
 <body>
         < div>
              <h1>我是大标题</h1>
              <a  heref="#">我是超链接</a>
               <p>我是段落</p>
           </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选择器,也会优先实行直接选中的效果
上一篇: Cookie 数据浅谈
下一篇: linux安装python3
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

如何防止单击按钮时对话框关闭 - How to prevent a dialog from closing when a button is clicked

问题: I have a dialog with EditText for input. 我有一个使用EditText输入的对话框。 When I click the "yes" button on dialog, it will validate the input and then close the dialog.......

富含淀粉
36分钟前
7
0
访问者模式Visitor

一 概述 场景:通常来说,用于封装数据所用到的pojo类,其只包含get、set,对应的业务逻辑是在Service上完成的;但如果出现多个pojo类都共用一套逻辑时,则应该考虑将逻辑进行抽象,不同类型...

小明不觉小
今天
5
0
jQuery Ajax错误处理,显示自定义异常消息 - jQuery Ajax error handling, show custom exception messages

问题: Is there some way I can show custom exception messages as an alert in my jQuery AJAX error message? 有没有什么方法可以在我的jQuery AJAX错误消息中显示自定义异常消息作为警报...

法国红酒甜
今天
28
0
告别传统机房:3D 机房数据可视化实现智能化与VR技术的新碰撞

前言 随着各行业对计算机依赖性的日益提高,计算机信息系统的发展使得作为其网络设备、主机服务器、数据存储设备、网络安全设备等核心设备存放地的计算机机房日益显现出它的重要地位,而机房...

xhload3d
昨天
51
0
spring源码解析-xml配置文件读取

整个 XML配置文件读取的大致流程如下: 通过继承自AbstractBeanDefinitionReader中的方法,来使用ResourLoader将资源文件路径转换为对应的Resource文件(读取资源文件并将其转为Resource) ...

wc_飞豆
昨天
22
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部