曲径通幽论坛

标题: 选择器：选择父级元素下的子元素(first-child/nth-child) [打印本页]
作者: beyes    时间: 2015-12-26 00:46
标题: 选择器：选择父级元素下的子元素(first-child/nth-child)
有时候想选择父级元素下的某个子元素应用样式，此时可以使用 first-child 和 nth-child() 这两个属性。其中，first-child 表示父元素的首个子元素；nth-child() 通过括号里填入一个整数可以指定任意一个子元素。

看下面的代码：
  1. <body>
  2.         <div class="d1">
  3.             <h1>曲径通幽技术论坛</h1>
  4.         <h1>曲径通幽技术论坛</h1>
  5.         <h1>曲径通幽技术论坛</h1>
  6.         <h1>曲径通幽技术论坛</h1>
  7.    </div>
  8.    <div class="d1">
  9.             <h1>曲径通幽技术论坛</h1>
  10.         <h1>曲径通幽技术论坛</h1>
  11.         <h1>曲径通幽技术论坛</h1>
  12.         <h1>曲径通幽技术论坛</h1>
  13.    </div>
  14.      
  15. </body>
复制代码

这两个 div 都使用了同一个 class 。如果我希望两个 div 里的第 1  个 h1 中的内容都变成红色，那么 css 描述可为：
  1. <style type="text/css">
  2.                 .d1>h1:first-child { color:red; }
  3.     </style>
复制代码

注意 .d1>h1 的写法，其中有个大于号，此处的读法为：.d1 里的 h1 。

如果想指定两个 div 里的第 3 个 h1 中的内容都变成红色，那么 css 描述为：
  1. <style type="text/css">
  2.                 .d1>h1:nth-child(3) { color:red; }
  3.     </style>
复制代码




欢迎光临 曲径通幽论坛 (http://www.groad.net/bbs/) Powered by Discuz! X3.2