• 实践中了解到的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的一个特性,如果两个相同的属性作用于同一标签,它们会发生层叠。如果多个复合选择器,同时作用于我们的同一标签,优先级就不好计算了,就要计算权重,通过比较权重,来先出优先级最高的选择器。

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

  • 相关阅读:
    响应式设计的5个CSS实用技巧
    jquery获取浏览器高度、宽度和滚动条高度
    jquery和其他库发生冲突的解决办法
    雅虎的14条性能优化原则
    手机网站前端开发布局技巧
    手机网站前端开发经验总结
    -webkit-scrollbar
    as3中TextFormat类的使用
    flash全屏后的UI控制
    字符串类的算法题
  • 原文地址:https://www.cnblogs.com/xuzhudong/p/6510741.html
Copyright © 2020-2023  润新知