Vue进阶（幺幺捌）：CSS3 - 选择器first-child、last-child、nth-child(3)

最新推荐文章于 2024-06-12 11:13:48 发布

2401_84618926

最新推荐文章于 2024-06-12 11:13:48 发布

阅读量406

点赞数 5

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84618926/article/details/138961539

版权

程序员专栏收录该内容

105 篇文章 0 订阅

订阅专栏

总结

我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

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：

❤️ 谢谢支持

喜欢的话别忘了关注、点赞哦~。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

忘了关注、点赞哦~。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-YZcNrGPf-1715842390068)]

2401_84618926

关注

5
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
Vue进阶（幺幺捌）：CSS3 - 选择器first-child、last-child、nth-child(3)

我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。
复制链接

扫一扫