美文网首页
CSS伪类、伪元素、继承、层叠

CSS伪类、伪元素、继承、层叠

作者: 叁度 | 来源:发表于2017-02-06 01:31 被阅读0次

    伪类

    • :first-child
    • :last-child
    • :nth-child(n)

    1.:first-child:last-child

    分别代表一组同胞中的第一和最后一个元素

    2.:nth-child(n)

    n为从 0 开始递增的自然数,也可用 odd (奇数) even (偶数)代替
    或者写成函数式 2n+1 ,3n+1等

    伪元素

    • first-letter
    • ::first-line
    • ::before&::after

    1.::first-letter

    行首第一个字符

    2.::first-line

    第一行

    3.::before&::after

    可在特定元素前面或后面添加内容

    e::after{
    content:".";
    display:block;
    height:0;
    visibility:hidden;
    clear: both;
    }
    //清除浮动
    

    继承

    每个 CSS 属性定义指定属性
    默认继承 ("Inherited: Yes") 默认不继承 ("Inherited: no")
    当元素的一个**可继承属性 **没有指定值时,则取父元素的同属性的 计算值 computed value
    当元素的一个 非继承属性 没有指定值时,则取属性的 初始值initial value

    层叠

    • 层叠规则:

      1. 浏览器会读取所有样式声明
      2. 按特指度(specificity)排序

      内联 > ID > 类 普通选择器 > 标签 伪元素选择器 > 继承的样式
      10倍差计算
      内联是特例

      1. 特指度相等,按照样式顺序位置排序(就近原则)
      1. 浏览器默认样式
      1. 外部样式
      2. 内部样式
      3. 内联样式
    • 提权(从上到下的顺序)

    1. 改变先后顺序:近水楼台先得月
    2. 提高选择器有限级(多个选择器一起定位标签,权重计算是总的和值)
      3.在属性后加 !important(一般不建议使用 除非前两步提权失效)

    相关文章

      网友评论

          本文标题:CSS伪类、伪元素、继承、层叠

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