zoukankan      html  css  js  c++  java
  • css权重

    做前端有好几年了,依然觉得CSS样式并没表面看到的那么容易,值得深入的东东太多,于是最近准备好好看看css相关的书籍,今天翻看web标准解决方案时看到了样式权重计算方式,以前在网上看到过,但是也忘的差不多,今特记录如下:

    样式一般通过选择器来找相应的样式的应用元素,当然还有行内样式是个例外,而选择器除非有如下几种:ID,样式,元素(类型选择器),伪类,伪元素,属性选择器,我们可以把选择分为4个等级,同时以10为基数:a(行内样式的数量),b(ID选择器的数量)

    ,c(类,伪类,属性选择器的数量),d(类型选择器,伪类选择器的数量),得出的数值代表当前选择器的权重

    假设当前等级为1,1,0,0则计算的权重为1100。

    下面来看看几个计算示例:

    style="" 的权重计算为1,0,0,0,权重为1000

    #wraper #content{}的权重计算为0,2,0,0,权重为200

    #content .datePosted{}的权重计算为0,1,1,0,权重为110

    p.conment .dateposted{}的权重计算为0,0,2,1,权重为21

    div p{}的权重计算为0,0,0,2,权重为2

    这样就很从数字判断当前样式的权重了,有一种特殊情况要稍加留意,就是当样式后加有!important时,它的样式始终是最高权重的,还有就可继承的样式,像字体颜色,大小什么的,继承的始终小于当前元素被直接赋予的样式。

    写到这里我相信在以后样式权重分析的时候可以得心应手了。

    附上我自己随便写的一测试DOME:点击进入

  • 相关阅读:
    机器人走方格问题
    一道数列的规律题(使用递归解决)
    反转单链表
    求一个二叉树的深度以及如何判断一个二叉树是一个平衡二叉树
    打印素数
    DAY28-mysql扩展与预处理-查出问题的关键
    DAY31
    jQuery很简单很基础的
    JavaScript中的事件委托及好处
    结合个人经历总结的前端入门方法
  • 原文地址:https://www.cnblogs.com/xwwin/p/6423694.html
Copyright © 2011-2022 走看看