CSS选择符之子代选择符的示例分析-创新互联

这篇文章给大家分享的是有关CSS选择符之子代选择符的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

为高昌等地区用户提供了全套网页设计制作服务,及高昌网站建设行业解决方案。主营业务为做网站、成都做网站、高昌网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!

后代选择符用于选取一个标签的所有后代,包括子代和孙辈等;而子代选择符只选取指定父辈的子代标签(指定标签元素的第一代子元素)。

子代选择符使用一个额外的符号(尖括号> )表明两个元素之间的关系。

例如:body>h2 选取的是标签里的所有第一代

标签。

HTML标签的关系图

CSS选择符之子代选择符的示例分析

HTML代码

body里面的h2标题

    

div里面的h3

    

        div里面的p标签,p标签里面有一个加粗的链接     

body里面的h3标题

        
  • 列表1         
                  
    • 小列表a
    •             
    • 小列表b
    •             
    • 小列表c
    •         
        
  •     
  •         列表2(带链接)     
  •     
  •         列表3(带链接)     

弄懂上面的结构之后,可以试试下面代码:

CSS代码

body>h3 {
    color: orange;
}

CSS选择符之子代选择符的示例分析

上面HTML代码里面,一共有2个

标签,但只有一个子代的

,另一个

是在
里面的,所以上面的CSS代码只作用在第一个

标签。

下面是比较好玩的子选择符

:first-child

选取第一个子标签。

CSS代码

h3:first-child {
    color: orange;
}

CSS选择符之子代选择符的示例分析

这个选择符的作用是:先找到网页中所有

标签,通过

标签找到其父元素,再判断

标签在其父元素中是否排第一个。

这里因为的第一个标签是

,所以的子元素

没被样式作用到。

因为

里的

的第一个子元素,所以
里的

变成了橙色字。

:last-child

这个选择符与 :first-child 选择符的作用类似,不过选取的是一个元素的最后一个子代。

CSS代码

li:last-child {
    font-size: 2em;
}

CSS选择符之子代选择符的示例分析

可以看到,“小列表C”和“列表3(带链接)”的字号变大了。因为这两项都是被指定的最后一项。

:only-child

选取某个元素的子代。

HTML代码

    

第一个div的p

    

第二个div的第一个p

    第二个div的第一个a

CSS代码

p:only-child {
    color: orange;
}

CSS选择符之子代选择符的示例分析

上述样式只作用在第一个

元素。第二个

里因为不止

元素,还有元素,所以第二个

元素不会被上述样式影响。

这个选择符比较难理解。仅当指定的标签是另一个标签的子代时,这个选择符定义的样式才有效。也就是说,子代中只有一个指定的标签还不行,如果指定的标签有其他同辈标签,这个选择符定义的样式就会失效。

:nth-child

这个选择符用法比较复杂,不过也特别有用。

这个选择符可以轻易地为表格中相隔的行、列表中相隔两个项目的项目或相隔其他数目的子代元素定义样式。

这个选择符需要一个值,用于确定选取哪些子代。

其中最简单的值是关键字,即odd和even。

  1. odd用于选取奇数子代元素。

  2. even用于选取偶数子代元素。

HTML代码

        
  • 1
  •     
  • 2
  •     
  • 3
  •     
  • 4
  •     
  • 5
  •     
  • 6
  •     
  • 7

CSS代码

li:nth-child(odd) {
    background: pink;
}
li:nth-child(even) {
    background: teal;
}

CSS选择符之子代选择符的示例分析

第一个子元素的下标是 1。

需要注意的是,如果在第一个

  • 之前还有其他元素,那第一个
  • 的下标就不是1了。
    比如

    HTML代码

          a     
    • 1
    •     
    • 2
    •     
    • 3
    •     
    • 4
    •     
    • 5
    •     
    • 6
    •     
    • 7

    这时的效果是

    CSS选择符之子代选择符的示例分析

    li:nth-child(odd) 的意思是找到

  • 元素的父元素,通过父元素来检测每一个
  • 的下标的奇偶。

    因为