首页 前端知识 CSS选择器:第一个、最后一个、单双、奇偶、第n个、反选,nth-child,last-child,first-child

CSS选择器:第一个、最后一个、单双、奇偶、第n个、反选,nth-child,last-child,first-child

2024-05-05 21:05:44 前端知识 前端哥 124 462 我要收藏

以下面的8个容器为例:

<style>
    .t123{line-height: 40px;padding: 500px; text-align: left;}
    .t123 p{background-color:#ddd; width: 40px; height: 40px; float: left; margin-right: 10px; text-align: center;}
    
</style>
<div class="t123">
    <p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p>
</div>

1、选择第一个<P>标签的背景为红色;

方法1:增加一行下面的代码。:first-child,代表选择器匹配属于其父元素的第 1 个子元素;

    .t123 p:first-child{background-color:#C00;}


    
方法2:增加一行下面的代码。:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。

    .t123 p:nth-child(1){background-color:#C00;}



2、选择最后一个<P>标签的背景为红色;

增加一行下面的代码。:last-child 代表选择器匹配属于其父元素的最后一个子元素

    .t123 p:last-child{background-color:#C00;}


 


3、选择单数或奇数<P>标签的背景为红色;


增加一行下面的代码。:nth-child(odd) 代表选择器匹配属于其父元素的1、3、5、7……奇数子元素

    .t123 p:nth-child(odd){background-color:#C00;}


4、选择双数或偶数<P>标签的背景为红色;


增加一行下面的代码。:nth-child(even) 代表选择器匹配属于其父元素的2、4、6、8……偶数子元素

    .t123 p:nth-child(even){background-color:#C00;}


5、选择3的倍数<P>标签的背景为红色;


增加一行下面的代码。:nth-child(an + b) 使用公式 (an + b)。描述:表示周期的长度,n 是计数器(从 0 开始),b 是偏移值。
在这里,我们指定了下标是 3 的倍数的所有 p 元素的背景色,代表选择器匹配属于其父元素的3、6、9、12……子元素

    .t123 p:nth-child(3n+0){background-color:#C00;}


6、反向选择3的倍数<P>标签的背景为红色;


增加一行下面的代码。:not(:nth-child(an + b)) 在选择器外层加个:not(); 
代表选择器匹配属于其父元素的除了3、6、9、12……以外的其他子元素

    .t123 p:not(:nth-child(3n+0)){background-color:#C00;}

7、扩展

CSS3 :nth-of-type(n)、:nth-of-type(odd)、:nth-of-type(even)、:nth-of-type(3n+b)选择器

代表规定属于其父元素的第二个 p 元素的每个 p:

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7007.html
标签
评论
发布的文章

HTML5-新增表单元素

2024-05-10 08:05:59

Dayjs 的一些常用方法

2024-05-10 08:05:59

Howler.js HTML5声音引擎

2024-05-10 08:05:59

前端攻城狮HTML5自查手册

2024-05-10 08:05:51

JavaScript 基础入门

2024-05-10 08:05:41

HTML5新手入门指南

2024-05-08 10:05:28

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!