设为首页收藏本站
切换到宽版

 找回密码
 立即注册
搜索
十三博客»博客 › 学习园地 › Css3相关 › CSS3选择器:only-child
返回列表 发新帖
查看: 1246|回复: 0

CSS3选择器:only-child

[复制链接]
admin

581

主题

110

回帖

4066

积分

管理员

积分
4066

众神之神
发表于 2015-12-30 18:27:26 | 显示全部楼层 |阅读模式
nth-child(n)
n的计算方式n=αn+β
α表示每次循环中包括几种样式
β表示指定的样式在循环中所处的位置
可以使用only-child选择器来代替使用nth-child和nth-last-child的实现方法
当只有一个列表元素项的时候可以使用only-child选择器来代替使用nth-child和nth-last-child
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title>CSS3选择器:only-child</title>
  6.     <style>
  7.         li:nth-child(4n+1) {
  8.             background-color: darkviolet;
  9.         }
  10.         li:nth-child(4n+2) {
  11.             background-color: darkgreen;
  12.         }
  13.         li:nth-child(4n+3) {
  14.             background-color: firebrick;
  15.         }
  16.         li:nth-child(4n+4) {
  17.             background-color: aqua;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <ul>
  23.         <li>列表1</li>
  24.         <li>列表2</li>
  25.         <li>列表3</li>
  26.         <li>列表4</li>
  27.         <li>列表1</li>
  28.         <li>列表2</li>
  29.         <li>列表3</li>
  30.         <li>列表4</li>
  31.         <li>列表1</li>
  32.         <li>列表2</li>
  33.         <li>列表3</li>
  34.         <li>列表4</li>
  35.         <li>列表1</li>
  36.         <li>列表2</li>
  37.         <li>列表3</li>
  38.         <li>列表4</li>
  39.         <li>列表1</li>
  40.         <li>列表2</li>
  41.         <li>列表3</li>
  42.         <li>列表4</li>
  43.         <li>列表1</li>
  44.         <li>列表2</li>
  45.         <li>列表3</li>
  46.         <li>列表4</li>
  47.         <li>列表1</li>
  48.         <li>列表2</li>
  49.         <li>列表3</li>
  50.         <li>列表4</li>
  51.     </ul>
  52. </body>
  53. </html>
复制代码


回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|十三博客 ( 鲁ICP备2023000528号 )

GMT+8, 2026-6-1 17:29 , Processed in 0.109223 second(s), 21 queries .

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表