zoukankan      html  css  js  c++  java
  • 实践中了解到的CSS样式的优先级

    CSS三大特性——继承、优先级和层叠。这是在精通CSS中重点强调的内容。

       继承即子类元素继承父类的样式,常用的可继承样式有:color,font,line-height,list-style,text-align,text-indent等,应用样式的元素的后代会继承样式的某些属性

    输出结果:

    由此可知,p继承了父元素的字体大小,而h1的话则是默认(2em)字体大小,一般h1都是200%字体大小,如果需要设置成和p同样的大小,可以把font-size改为100%:

                         结果显示:

    我们知道在CSS中,一个元素可能有两个或更多的规则。CSS通过一个称为层叠的过程来处理这种冲突。规则的优先级:

    下面看几个例子:

    输出:因为虽然!important优先级最高,但是没有继承性,li的颜色继承自ul

    html是一个嵌套了12个div的复杂盒子,最里面的div有me这个类,判断方法:都可以命中元素,所以通过权重,类选择器>元素选择器,所以选择blu

    输出:

    输出:

    第二个没有命中PASS掉,第一个和第三个比较权重,由于第一个没有类,所以答案是blue

    输出:

    在这个例子中,通配符的特殊性比继承的特殊性要高。

    层叠是css的一个特性,如果两个相同的属性作用于同一标签,它们会发生层叠。如果多个复合选择器,同时作用于我们的同一标签,优先级就不好计算了,就要计算权重,通过比较权重,来先出优先级最高的选择器。

    注意:比较权重的时候一定要注意:我们的选择器一定要命中对应的标签才可能让标签拥有对应的属性。

  • 相关阅读:
    《命运赋》
    CSS3中的 transform (变形)+Transition(转换) = animation(动画)
    c#进阶之泛型
    正则表达式运用
    查询某时间段的统计数据
    很好用的request转换为实体方法还有判断实体所有参数不能为空的方法
    http 协议集合,超级简单
    今天无意发现jquery的一个以前的误导
    IFRAM随内部长宽高变化
    就最近学习MVC4.0的页面用法学到的东西
  • 原文地址:https://www.cnblogs.com/xuzhudong/p/6510741.html
Copyright © 2011-2022 走看看