CSS继承性

CSS属性继承：外层元素的样式，会被内层元素进行继承。

　　多个外层元素的样式，最终都会“叠加”到内层元素上。

什么样的CSS属性能被继承呢？

CSS文本属性都会被继承的：

color、 font-size、font-family、font-style、 font-weight

text-align、text-decoration、text-indent、letter-spacing、line-height

提示：<body>中的CSS属性，会被所有的子元素继承。

CSS优先级

（1）单个选择器的优先级

行内样式 > id选择器 >  class选择器 > 标签选择器

（2）多个选择器的优先级

多个选择器的优先级，一般情况下，指向越准确，优先级越高。

特殊情况下，我们需要假设一些值：

标签选择器      优先级为1

类选择器        优先级为10

Id选择器        优先级为100

行内样式        优先级为1000

              计算以下优先级：

.news h1{color:red;}     优先级：10 + 1 = 11

　　　　　　　 .title{color:blue;}        优先级：10

div.news h1{color:red;}   优先级：1 + 10 + 1 = 12

　　　　　　　 h1.title{color:blue;}      优先级：1 + 10 = 11

CSS 继承和优先级的更多相关文章

  1. CSS继承总结

    CSS的一个重要特征就是继承,它是依赖于祖先-后代的关系的.继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代. CSS可以继承的属性有: 1.文字相关:font-famil ...

  2. CSS的继承与优先级

    CSS样式继承性 body,div,p{} html文档可以上图的种种节点树的形式表示,css层叠样式表中的各元素也有这种对应关系 <body>是文档中最大的根节点,body中的所有元素都 ...

  3. CSS三大特性（继承、优先级、层叠）之个人见解

    首先声明一下CSS三大特性——继承.优先级和层叠.继承即子类元素继承父类的样式,比如font-size,font-weight等f开头的css样式以及text-align,text-indent等t开 ...

  4. CSS选择器、优先级与匹配原理（转）

    CSS选择器.优先级与匹配原理 导航 为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好 废话就不多说了 CSS 2.1 selectors, Part 1 计算指定选择器的优先 ...

  5. css权重及优先级问题

    css权重及优先级问题 几个值的对比 初始值 指定值 计算值 应用值 CSS属性的 指定值 (specified value)会通过下面3种途径取得: 在当前文档的样式表中给这个属性赋的值,会被优先使 ...

  6. [程序猿入行必备]CSS样式之优先级

    专业玩家请移步:http://www.w3.org/TR/CSS2/cascade.html 使用CSS控制页面样式时,常常出现设定的样式被"覆盖",不能生效的情况. 浏览器是根据 ...

  7. CSS 选择器及其优先级

    CSS 的选择器有很多类型,我们将常用的这些列表如下: 一.CSS 选择器的类别 1. 基本选择器 基本选择器 解释 备注 * 通用选择器,匹配所有元素 CSS2 E 元素选择器,匹配类型为 E 的所 ...

  8. CSS样式的优先级

    1.相同权值情况下,CSS样式的优先级总结来说,就是--就近原则(离被设置元素越近优先级别越高): 内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中). 2.权 ...

  9. css !important用法以及CSS样式使用优先级判断

    之前一直看到很多css中都有!important这个样式,一直不知道有什么作用的,今天在网上详细了解了一下,看了别人的博客,顺便转载收藏一下 css !important用法CSS样式使用优先级判断 ...

随机推荐

  1. CDH 下线节点

    rm -rf /var/web/com/public  杜绝这种删除方式 停止集群下线的节点 步骤: 1 停止主机上的角色 2 解除授权 3 从集群中删除 4 为了避免数据丢失,必须一台一台的进行,如 ...

  2. 阿里云成为Hyperledger超级账本全球会员，发力区块链生态建设

    摘要: 阿里云将会与Hyperledger社区共同推进全球区块链技术和商业生态在多行业领域的建设. 2018年12月12日在瑞士巴塞尔的2018Hyperledger全球峰会上,阿里云正式加入Hype ...

  3. 【Codeforces Round #429 (Div. 2) B】 Godsend

    [Link]:http://codeforces.com/contest/841/problem/B [Description] 两个人轮流对一个数组玩游戏,第一个人可以把连续的一段为奇数的拿走,第二 ...

  4. Delphi GDI对象之脱屏位图（Offscreen Bitmaps）

    脱屏位图(Offscreen Bitmaps) 脱屏位图,也叫内存位图,普遍用于Windows程序设计中.它在内存中制作图像,然后利用Draw方法在屏幕上显示出来.当用户想更快的在屏幕上绘制图像时,脱 ...

  5. hdu多校第九场 1006 （hdu6685） Rikka with Coin 暴力

    题意: 有一些1毛,2毛,5毛,1块的钢镚,还有一些价格不同的商品,现在要求你带一些钢镚,以保证这些商品中任选一件都能正好用这些钢镚付账,问最少带多少钢镚. 题解: 对于最优解,1毛的钢镚最多带1个, ...

  6. JS中 reduce() 的用法

    过去有很长一段时间,我一直很难理解 reduce() 这个方法的具体用法,平时也很少用到它.事实上,如果你能真正了解它的话,其实在很多地方我们都可以用得上,那么今天我们就来简单聊聊JS中 reduce ...

  7. pycharm 参数、快捷键、调试模式

    PyCharm参数.快捷键.调试模式 PyCharm设置参数 在运行Python脚本时,会经常遇到需要传入额外的参数来运行脚本. 例如下脚本1: #!/usr/bin/env python2 # *. ...

  8. c++ 11新特性学习1

    static_assert 静态断言,特点是编译期的断言检查 assert 运行时期的断言检查 二者参数用法相同

  9. super 关键字的使用及说明

    super 关键字主要用于访问父类的变量和方法. 代码示例: public class Student { String name; public Student(){ System.out.prin ...

  10. Android Telephony分析(五) ---- TelephonyRegistry详解

    本文紧接着上一篇文章<Android Telephony分析(四) —- TelephonyManager详解 >的1.4小节.从TelephonyRegistry的大部分方法中: 可以看 ...