关闭

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

时间: 2019-03-24阅读: 842标签: 样式

一、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昵称),选中同一个标签,并且给同一个标签设置相同的属性时,如何层叠就优先级来确定。优先级判断的三种方式:


1 是否直接选中,直接选中指的是直接选中要设置css样式的标签,和标签的id或者class类名。(间接选中就是指的是继承性,比如选择<ul>那里面的li继承ul的属性,就称为继承属性)
如果是间接选中,谁离目标标签比较近就听谁的。


2是否是相同的选择器。
如果是相同选择器,那么就是谁写在后面就听谁的。(比如给两个p标签设置css样式)
p{color:blue}
p{color:red}
那么就会以第二个p为标准,文字变成红色
 
3不同的选择器
如果都是直接选中,并且不是相同类型的选择器,那么就会按照,选择器的优先级来层叠
id>类>标签>通配符>继承>浏览器默认
 
 
权重计算
如果选择器里有直接选中和间接选中。哪怕是间接的选择器为id选择器,也会优先实行直接选中的效果


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/2471

关闭

vue用v-html加载渲染,里面的内容样式不生效

需要输出富文本的内容,需要设置里面的图片样式最大宽度100%。可是设置img 100%后没反应,看F12检查元素也没加上去。解决方法有2个:coped属性导致css仅对当前组件生效

使用execCommand将文字样式设置成css样式的办法

我们在使用contenteditable属性做富文本编辑器时经常会用到document.execCommand方法来处理文字的样式。但当我们要设置比如font-size,会发现这个命令只支持(1-7)这几种字体大小值

关于CSS nth-child( ) 的特殊使用

最近开发的时候遇到一个样式问题,一个li列表浮动排列,需要将除了前4个其他的li的style加上margn:0; 首先想到一个一个nth-child(5)、nth-child(6)、nth-child(7)... 很快觉得这个方法太傻了=。=!

CSS 中重要的层叠概念

最近在项目的过程中遇到了一个问题,menu-bar希望始终显示在最上面,而在之后的元素都显示在它之下,当时设置了 z-index 也没有效果,不知道什么原因,因此找了一下css有关层叠方面的资料,解决了这个问题,这里记录一下

为什么会出现CSS前缀?

使用过CSS3属性的同学都知道,CSS3属性都需要带各浏览器的前缀,甚至到现在,依然还有很多属性需要带前缀。这是为什么呢?浏览器厂商以前就一直在实施CSS3,但它还未成为真正的标准。

前端项目中的样式管理怎么就那么难?

前几天我们开会讨论新项目的技术选型和项目结构,其中讨论到样式管理的部分,争论一下子多起来。前端样式,最终的表现还是css,但是在开发时,则会有多种多样的管理方式

原生js获取、添加、修改_非行间css样式

在html中样式分为:浏览器默认样式,引用样式(link外部样式文件,stle标签定义样式)、行间样式(及节点style属性定义的样式)。这篇文章主要讲解使用原生js获取、添加非行间css样式。

js中尺寸类样式

都要事件对象的配合,Tip:注意与浏览器及元素尺寸分开,鼠标类尺寸样式都是X,Y,浏览器及元素的各项尺寸时Height,Width;检测相对于浏览器的位置:event.clientX/event.clientY

JS设置CSS样式的几种方式

用JS来动态设置CSS样式,常见的有以下几种:直接设置style的属性 某些情况用这个设置 !important值无效;直接设置属性(只能用于某些属性,相关样式会自动识别)

CSS3 简单的砸金蛋样式

实现样式:1、鼠标移入后,鼠标样式图标变为“锤子”。2、用户砸金蛋,锤子简单的扬起效果。3、砸碎金蛋,显示内容

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!