Does the CSS direct decendant (>) not have any value in selectivity?

后端 未结 3 1664
北荒
北荒 2020-12-11 02:04

Given the following class declarations and code...



        
相关标签:
3条回答
  • 2020-12-11 02:51

    There's no value for > for css specificity.

    Both case have 11 value for specificity:

    .foo > a { color:green; }/*specificity value is 11*/
    .bar a { color:red; }/*specificity value is 11*/
    

    In your case you may use like this to have greater specificty:

    .bar .foo > a { color:green; }/*greater specificity value is 21*/
    .foo a { color:red; }/*specificity value is 11*/
    

    Ok, I'm going add here how specificity works:

    Selector                          Specificity         Specificity in large base
    inline-style                      1 0 0 0             1000
    id selector                       0 1 0 0              100
    class,pseudo,attribute selector   0 0 1 0               10
    type selector and pseudo elements 0 0 0 1                1                     
    
    0 讨论(0)
  • 2020-12-11 02:54

    You have two conflicting CSS rules. Direct descendant selector has the same specificity as descendant selector if I am not mistaken, therefore the rule parsed later will override the formerly parsed rule, so if your rules are:

    .foo > a { color:green; }
    .bar a { color:red; }
    

    then the color will be red. If your rules are:

    .bar a { color:red; }
    .foo > a { color:green; }
    

    then the color will be green for any anchors which fulfill the selector of both rules.

    0 讨论(0)
  • 2020-12-11 02:58

    Combinators don't have any value in specificity only selectors have :id, class, tags , pseudo elements , pseudo classes, attribute selectors.

    0 讨论(0)
提交回复
热议问题