zoukankan      html  css  js  c++  java
  • 正式回归css之样式优先级

      总结起来很简单:对于一个元素

    1.本身没有样式修饰,它会怎么做呢?search! 所以

      第一个原则:就近原则,找到离自己最近的祖先元素继承样式

    2.本身有样式

      2.1 内嵌样式(style)>内联样式表>外联样式表 这点没什么好说的 

      2.2 当涉及到多个选择器修饰的时候,有优先级顺序:内嵌样式>id>class>标签

      举个栗子吧,就是  先比较id个数,在以此类推,具体看demo

    https://jsfiddle.net/y0a14gqv/

      2.3 !important 最无敌 记住这点就可以了!

    ======================================================

    10/24/

    重新看了之前的文章,嗯,我的确是个脑细胞比较简单 的人哈哈...

    不过这也是我的性格所致,把自己所想的清楚表达出来,就很满足。

    今天看了mdn的文档,里面提及了css优先级,有点意思的是,我之前面试被提及优先级一律按照上诉解决,当然我觉得也没多大碍,如果能说出官方文档的定义,

    自然给人感觉牛逼不少,所以还是吸收一下。

    一下是原文:

     Calculating a selector's specificity

    A selector's specificity is calculated as follows:

    • count the number of ID selectors in the selector (= a)
    • count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)
    • count the number of type selectors and pseudo-elements in the selector (= c)
    • ignore the universal selector

    Selectors inside the negation pseudo-class are counted like any other, but the negation itself does not count as a pseudo-class.

    Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity.

    Examples:

    *               /* a=0 b=0 c=0 -> specificity =   0 */
    LI              /* a=0 b=0 c=1 -> specificity =   1 */
    UL LI           /* a=0 b=0 c=2 -> specificity =   2 */
    UL OL+LI        /* a=0 b=0 c=3 -> specificity =   3 */
    H1 + *[REL=up]  /* a=0 b=1 c=1 -> specificity =  11 */
    UL OL LI.red    /* a=0 b=1 c=3 -> specificity =  13 */
    LI.red.level    /* a=0 b=2 c=1 -> specificity =  21 */
    #x34y           /* a=1 b=0 c=0 -> specificity = 100 */
    #s12:not(FOO)   /* a=1 b=0 c=1 -> specificity = 101 */

    挺好理解的就不多说,有几个概念还没想清楚,
     pseudo-classes
     pseudo-elements 
    以上这两个

    ===============================

    发觉做网站离不开对css深刻的理解,废话少说,我不时的摘录点:

     <p class="class1 class2 class3">something</p>

    css代码

    .class1{
                color: #000;
            }
            .class2{
                color: red;
            }
            .class3{
                color: blue;
            }

    结果显示:字体颜色为蓝色,class会向前覆盖

    No living without dream
  • 相关阅读:
    lda spark 代码官方文档
    4.17 斐波那契数列 K维斐波那契数列 矩阵乘法 构造
    CF R 635 div1 C Kaavi and Magic Spell 区间dp
    CF R 635 div2 1337D Xenia and Colorful Gems 贪心 二分 双指针
    luogu P5043 【模板】树同构 hash 最小表示法
    CF R 633 div 1 1338 C. Perfect Triples 打表找规律
    CF 633 div1 1338 B. Edge Weight Assignment 构造
    4.15 省选模拟赛 哈密顿回路 折半搜索 双指针
    4.15 省选模拟赛 编码 trie树 前缀和优化建图 2-sat
    4.13 省选模拟赛 守卫 点分治 虚树
  • 原文地址:https://www.cnblogs.com/belongcai/p/4885620.html
Copyright © 2011-2022 走看看