您现在的位置是：网站首页> 编程资料编程资料

详解CSS选择符之子代选择符CSS样式子代选择符(大于号 >)使用实例

2021-09-04 986人已围观

简介 这篇文章主要介绍了详解CSS选择符之子代选择符的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

后代选择符用于选取一个标签的所有后代，包括子代和孙辈等；而子代选择符只选取指定父辈的子代标签（指定标签元素的第一代子元素）。

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

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

标签。

HTML标签的关系图

HTML代码

 

body里面的h1标题
div里面的h2
 div里面的p标签，p标签里面有一个加粗的链接
body里面的h2标题

弄懂上面的结构之后，可以试试下面代码：

CSS代码

 body>h2 { color: orange; }

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

标签，但只有一个子代的

，另一个

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

标签。

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

:first-child

选取第一个子标签。

CSS代码

 h2:first-child { color: orange; }

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

标签，通过

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

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

这里因为的第一个标签是

，所以的子元素

没被样式作用到。

因为

里的

是
的第一个子元素，所以
里的

变成了橙色字。

:last-child

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

CSS代码

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

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

:only-child

选取某个元素唯一的子代。

HTML代码

第一个div的p
第二个div的第一个p
第二个div的第一个a

CSS代码

 p:only-child { color: orange; }

上述样式只作用在第一个

的

元素。第二个

里因为不止

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

的

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

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

: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; }

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

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

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

    HTML代码

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

    这时的效果是

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

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

    因为

    • 相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网