CSS3 - 选择器first-child、last-child、nth-child、nth-last-child、nth-of

举报
SHQ5785 发表于 2024/04/11 09:08:21 2024/04/11
【摘要】 1. first-child(IE7兼容)、last-child(IE8不兼容)html:<body> <h2>列表</h2> <ul> <li>列表项目1</li> <li>列表项目2</li> <li>列表项目3</li> <li>列表项目4</li> </ul></body>css:<style> ul {list-style: none;} ...

1. first-child(IE7兼容)、last-child(IE8不兼容)

html:

<body>
  <h2>列表</h2>
  <ul>
    <li>列表项目1</li>
    <li>列表项目2</li>
    <li>列表项目3</li>
    <li>列表项目4</li>
  </ul>
</body>

css:

<style>
    ul {list-style: none;}
    li:first-child {/*给第一个列表项目设置样式 兼容IE7*/
      background-color: pink;
    }
    li:last-child { /*给最后一个列表项目设置样式 IE8不兼容*/
      background-color: red;
    }
</style>

解析:
一个页面中无论有几个ul列表,只要设置first-child、last-child,那么所有ul列表项的第一个和最后一个列表项目都会有设置的样式。

2.nth-child、nth-last-child (IE8不兼容)

html:

<body>
  <h2>列表</h2>
  <ul>
    <li>列表项目1</li>
    <li>列表项目2</li>
    <li>列表项目3</li>
    <li>列表项目4</li>
    <li>列表项目5</li>
    <li>列表项目6</li>
  </ul>
</body>

css:

<style>
    ul {list-style: none;}    
    li:nth-child(3) { /*表示li元素中,第三个元素 IE8不兼容*/
      background-color: pink;
    }
    li:nth-last-child(2) { /*表示li元素中,倒数第二个元素 IE8不兼容*/
      background-color: red;
    }
</style>

3. 对奇数、偶数使用样式

html:

<ul>
    <li>列表项目1</li>
    <li>列表项目2</li>
    <li>列表项目3</li>
    <li>列表项目4</li>
    <li>列表项目5</li>
    <li>列表项目6</li>
</ul>

css:

<style>
    ul {list-style: none;}
    li:nth-child(odd) {/*表示li元素中,从1开始 奇数为pink*/
      background-color: pink;
    }
    li:nth-child(even) {/*表示li元素中,从1开始 偶数为灰色*/
      background-color: #ccc;
    }
</style>

解析: li:nth-child(odd)含义:li父元素ul的儿子中,从1开始数,奇数儿子设置样式为xxx;

当父元素为列表时,因为只有列表项目一种子元素,不会出现问题;当父元素是div时,就不止一种子元素,会引起问题。如下:

例如:设置div元素中为奇数标题h2背景颜色。

html:

<div>
    <h2>文章标题A</h2>
    <p>我是一个小段落。。。</p>
    <h2>文章标题B</h2>
    <p>我是一个小段落。。。</p>
    <h2>文章标题C</h2>
    <p>我是一个小段落。。。</p>
    <h2>文章标题D</h2>
    <p>我是一个小段落。。。</p>
</div>

css:

h2:nth-child(odd) {
      background-color: pink;
}

解析:由于div元素下奇数元素为p,偶数元素为后,故 h2:nth-child(odd)执行结果为:h2的父元素div 的所有儿子中 为奇数的儿子 设置背景颜色;而不是所有h2中为偶数的h2设置样式;
解决方法: nth-of-type可以避免问题产生。

4. nth-of-type(IE8不兼容):只针对同类型的元素进行计算

css:

h2:nth-of-type(odd) { /*所有h2标签中为奇数的设置样式*/
    background-color: pink;
}
h2:nth-of-type(even) { /*所有h2标签中为偶数的设置样式*/
    background-color: #ccc;
}

解析: h2:nth-of-type(odd)含义:在所有h2标签中,只要是奇数h2就设置样式;只针对h2标签,与父元素无关;

5. 循环使用样式 li:nth-child(4n+1)

html:

<ul>
   <li>列表项目1</li>
   <li>列表项目2</li>
   <li>列表项目3</li>
   <li>列表项目4</li>
   <li>列表项目5</li>
   <li>列表项目6</li>
   <li>列表项目7</li>
   <li>列表项目8</li>
   <li>列表项目9</li>
   <li>列表项目10</li>
   <li>列表项目11</li>
   <li>列表项目12</li>
</ul>

css:

<style>
    ul {list-style: none;}
    li:nth-child(4n+1) { /*表示li元素中,4个li为一组循环 第一个li设置为*/
      background-color: red;
    }
    li:nth-child(4n+2) { /*表示li元素中,4个li为一组循环 第二个li设置为*/
      background-color: pink;
    }
    li:nth-child(4n+3) {
      background-color: #ccc;
    }
    li:nth-child(4n+4) {
      background-color: yellow;
    }
</style>

解析:
4n含义:四个li元素为一组循环;
4n+1含义:这一组循环中,第一个样式;
4n+2含义:这一组循环中,第二个样式;

4n+3含义:这一组循环中,第三个样式;
4n+4含义:这一组循环中,第四个样式;

拓展阅读

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。