zoukankan      html  css  js  c++  java
  • 【00】伪类选择符-魔芋的理解

    【00】魔芋的理解

    nth-child(n)这样的带n的,n从1开始。
    n可以是表达式:n*3,n+3
    可以是特殊字符串“odd”,"even"

    【02】empty

    匹配没有任何子元素(包括text节点)的元素E。
    注意:如果开始标签和结束标签间有空格或是换行,都是属于有元素的。(魔芋:所以不实用)

    【04】not(s)
    匹配不含有s选择符的元素E。

    【05】first-child
    E:first-child
    E:first-child { sRules }
    用法比较奇怪:
    1,是父元素的第一个子元素。
    2,用在子元素上。
    ul li:first-child {} //选择的是li。
    3,li必须是所有兄弟节点中的第一个元素。
    那么,li前面有个p兄弟节点,就会失效。


    【06】last-child
    同first-child。不过,是最后一个。


    【07】first-of-type

    E:first-of-type { sRules }


    【】同类型中,选择第一个。

    【】用在子元素上。

    【】也就是说,被选元素可以不是父元素的第一个子元素。

    用法:li:first-of-type {}


    【08】last-of-type
    同first-of-type


    【09】nth-child(n)

    【】用在子元素上,并且,它的n是按照父元素的所有子元素来排序的。


    p:nth-child(2);  那么,它的父元素的所有子元素。排序为第3个的元素必须是p,才有效(从1开始计数。)



    常见用法:

    li:nth-child(2n) {} ;//偶数的li



    【10】nth-last-child(n)



    【11】nth-of-type(n)
    匹配同类型中的第n个同级兄弟元素E。
    要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是html,即E可以是html的子元素,也就是说E可以是body
    该选择符总是能命中父元素的第n个为E的子元素,不论第n个子元素是否为E


    【12】nth-last-of-type(n)


    【13】only-child

    E:only-child { sRules }

    只有一个子元素的元素。

    比如说p .只有文本节点作为子元素。

    【】用在子元素上

    【】它的父元素只有一个子元素。



    【14】only-of-type

    【】用在子元素上

    【】它的父元素只有一个子元素。

    【】并且的它的类型为指定类型。




    **

  • 相关阅读:
    Zookeeper系列(二)特征及应用场景
    Scala学习笔记(三)类层级和特质
    zookeeper系列(一)安装
    Scala学习笔记(二)表达式和函数
    Spring笔记(四)SpingAOP
    Spring笔记(三)AOP前篇之动态代理
    Scala学习笔记(一)数据类型
    Linux内核系列设备模型(一) Kobject与Kset
    Spring笔记(二)Core层
    Linux内核系列之Block块层(一)
  • 原文地址:https://www.cnblogs.com/moyuling/p/9032910.html
Copyright © 2011-2022 走看看