美文网首页
css3选择器汇总

css3选择器汇总

作者: 冯之扬 | 来源:发表于2016-11-10 01:20 被阅读0次

    一重要选择器
    E,F 多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔 div,p { border:1px solid #ccc;}
    E F 后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔 div p{color:red;}
    E > F 子元素选择器,匹配所有E元素的子元素F div > strong { color:#f00; }
    E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F p + p { color:#f00; }
    E:nth-child(n) 这个属性默认父元素的第n个子元素E 如果没有父元素那么他的父元素就是body
    此属性可以实现奇偶 2n 2n+1
    E:nth-of-type()从字面意思就很好理解了。选择第n个E元素.没有父级元素的限制
    三、选择器的优先级
    从高到低依次是:
    1.在属性后面使用 !important会覆盖页面内任何位置定义的元素样式
    2.作为style属性写在元素标签上的内联样式
    3.id选择器
    4.类选择器
    5.伪类选择器
    6.属性选择器
    7.标签选择器
    8.通配符选择器
    9.浏览器自定义

    实际上,同一个元素可以使用多个规则来指定它的字体颜色,每个规则都有自己的选择器。显然最终只有一个规则起作用(不可能一个字既是红色又是绿色),那么该规则的特殊性最高,特殊性即css优先级。那么CSS的优先级怎么计算呢?
    选择器的特殊性值表述为4个部分,用0,0,0,0表示。

    ID选择器的特殊性值,加0,1,0,0;
    类选择器、属性选择器或伪类,加0,0,1,0;
    元素和伪元素,加0,0,0,1;
    通配选择器对特殊性没有贡献,即0,0,0,0;
    最后比较特殊的一个标志!important(权重),它没有特殊值,但是他的优先级是最高的,为了方便记忆,可认为他的默认值是1,0,0,0.

    相关文章

      网友评论

          本文标题:css3选择器汇总

          本文链接:https://www.haomeiwen.com/subject/qrwtpttx.html