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

    【】用在子元素上

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

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




    **

  • 相关阅读:
    23丨当Postgres磁盘读引起IO高的时候,应该怎么办
    22丨案例:当磁盘参数导致IO高的时候,应该怎么办
    LNMP环境搭建
    virtualbox中centos虚拟机网络配置
    chrome扩展程序开发
    Linux账号管理
    Linux设置文件与Shell操作环境
    Yii2之组件的注册与创建
    Stream 源码分析
    Exchanger 源码分析
  • 原文地址:https://www.cnblogs.com/moyuling/p/9032910.html
Copyright © 2011-2022 走看看