- CSS 教程
- CSS - 教程
- CSS - 简介
- CSS - 语法
- CSS - 选择器
- CSS - 包含
- CSS - 度量单位
- CSS - 颜色
- CSS - 背景
- CSS - 字体
- CSS - 文本
- CSS - 图像
- CSS - 链接
- CSS - 表格
- CSS - 边框
- CSS - border-block 属性
- CSS - 边框内联
- CSS - 边距
- CSS - 列表
- CSS - Padding 属性
- CSS - 光标
- CSS - 轮廓
- CSS - 维度
- CSS - 滚动条
- CSS - 内联块
- CSS - 下拉列表
- CSS - visibility 属性
- CSS - Overflow 属性
- CSS - 清除修复
- CSS - float(浮点)
- CSS - 箭头
- CSS - resize 属性
- CSS - quotes 属性
- CSS - order 属性
- CSS - Position 属性
- CSS - hypens 属性
- CSS - :hover(悬停)
- CSS - display(显示)
- CSS - focus 属性
- CSS - zoom(缩放)
- CSS - translate 属性
- CSS - Height 属性
- CSS - hyphenate-character 属性
- CSS - Width 属性
- CSS - opacity 属性
- CSS - z-index 属性
- CSS - bottom 属性
- CSS - 导航栏
- CSS - 覆盖
- CSS - 表单
- CSS - 对齐
- CSS - 图标
- CSS - 图片库
- CSS - 注释
- CSS - 加载器
- CSS - Atrribute 选择器属性
- CSS - 运算器
- CSS - root
- CSS - 盒子模型
- CSS - 计数器
- CSS - Clip (Obsolete) 属性
- CSS - writing-mode 属性
- CSS - Unicode-bidi 属性
- CSS - min-content 属性
- CSS - 全部
- CSS - inset 属性
- CSS - isolation 属性
- CSS - overscroll-behavior 属性
- CSS - justify-items 属性
- CSS - justify-self 属性
- CSS - tab-size 属性
- CSS - pointer-event 属性
- CSS - place-content 属性
- CSS - place-items 属性
- CSS - place-self 属性
- CSS - max-block-size 属性
- CSS - min-block-size 属性
- CSS - mix-blend-mode 属性
- CSS - max-inline-size 属性
- CSS - min-inline-size 属性
- CSS - offset 属性
- CSS - accent-color 属性
- CSS - user-select 属性
- CSS 高级
- CSS - grid 属性
- CSS - Grid 布局
- CSS - flexbox
- CSS - vertical-align 属性
- css - positioning
- css - layers
- css - pseudo_classes
- CSS - 伪元素
- CSS - @ 规则
- CSS 滤镜 - text-effect 属性
- CSS 分页媒体
- CSS 打印
- CSS - 布局
- CSS - 验证
- CSS - 图像精灵
- CSS - !important
- CSS - 数据类型
- CSS3 教程
- CSS - 圆角
- CSS - 边框图像
- CSS - 多种背景
- CSS - 渐变
- CSS - box-shadow 属性
- CSS - box-decoration-break 属性
- CSS - caret-color 属性
- CSS - text-shadow 属性
- CSS - 2D 转换
- CSS - 3D 变换
- CSS - transition 属性
- CSS - 动画
- CSS - 多列布局
- CSS - 盒子大小调整
- CSS - 工具提示
- CSS - buttons
- CSS - 分页
- CSS - 变量
- CSS - 媒体查询
- CSS - 值函数
- CSS - 数学函数
- CSS - Mask 属性
- CSS - shape-outside 属性
- CSS - 样式图像
- CSS - 特异性
- CSS - 自定义属性
- CSS 响应式
- CSS - 响应式网页设计 (RWD)
- CSS - 响应式设计视口
- CSS - 响应式网格视图
- CSS - 响应式媒体查询
- CSS - 响应式图像
- CSS - 响应式视频
- CSS - 响应式框架
- CSS 引用
- CSS - 所有属性列表
- CSS - 颜色引用
- CSS - 浏览器支持参考
- CSS - 网页字体
- CSS 工具
- CSS - PX 到 EM 的转换
CSS - 伪类 :nth-last-child()
CSS伪类 :nth-last-child() 根据元素在一组兄弟姐妹中的位置匹配元素,从最后开始计算。
语法
:nth-last-child(<nth> [of <complex-selector-list>]?) {
/* ... */
}
可能的值
- 奇数 − 此值表示从末尾开始计数的系列中的所有奇数(例如,1,3,5..etc)同级元素。
- 偶数 − 此值表示从末尾开始计数的系列中的所有偶数(例如,2,4,6...等)同级元素。
- 函数表示法 (<an+b>) − 此值表示从其父容器的末尾开始计数的序列中的每个 an+b 子元素,其中 a 是正整数,n 是从 0 开始的计数器变量。b 是另一个正整数。
下表描述了 CSS 选择器的列表及其说明:
选择器 | 描述 |
---|---|
tr:nth-last-child(odd) or tr:nth-last-child(2n+1) | 表示 HTML 表中的所有奇数行。 |
tr:nth-last-child(even) or tr:nth-last-child(2n) | 表示 HTML 表中的所有偶数行。 |
:nth-last-child(6) | 代表第六个元素,从末尾开始计算。 |
:nth-last-child(5n) | 表示每五个元素(5、10、15 等),从末尾开始计数。 |
:nth-last-child(3n+4) | 代表元素 4、7、10、13 等,从末尾开始计数。 |
:nth-last-child(-n+2) | 表示一组同级产品中的最后两个元素。 |
p:nth-last-child(n) or p:nth-last-child(n+1) | 表示一组同级<p>元素。 |
p:nth-last-child(1) or p:nth-last-child(0n+1) | 表示一组兄弟姐妹中的第一个元素的每个 <p>,从末尾开始计数。 |
CSS :nth-last-child() - 列表示例
下面是一个示例,说明如何在 ol 列表中设置 li 元素的样式 -
<html>
<head>
<style>
li:nth-last-child(-n+1) {
font-weight: bold;
color: red;
}
li:nth-last-child(3n+4){
background-color: pink;
}
li:nth-last-child(5n){
font-weight: bold;
}
</style>
</head>
<body>
<p>Styling last item as bold and red color.</p>
<p>Styling every third list item starting with the fourth list item from the last with a pink background.</p>
<p>Styling fifth item from last as bold.</p>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ol>
</body>
</html>
CSS :nth-last-child() - 表格示例
下面是一个示例,如何为表中的特定行设置样式 -
<html>
<head>
<style>
table {
border: 3px solid black;
}
tr:nth-last-child(6) {
font-weight: bold;
color: blue;
}
tr:nth-last-child(odd) {
background-color: pink;
}
tr:nth-last-child(even) {
background-color: greenyellow;
}
</style>
</head>
<body>
<p>Styling the heading of the table as bold and blue in color.</p>
<p>Styling all odd-numbered rows from the end with a pink background color.</p>
<p>Styling all even-numbered rows from the end with a greenyellow background color.</p>
<table>
<tr>
<th>Names</th>
</tr>
<tr>
<td>Jhon Sean</td>
</tr>
<tr>
<td>Rocky Luis</td>
</tr>
<tr>
<td>Oliver David</td>
</tr>
<tr>
<td>Marry Alamnd</td>
</tr>
<tr>
<td>Dora Ann</td>
</tr>
</table>
</body>
</html>
CSS :nth-last-child() - 段落示例
以下是如何设置段落样式的示例 -
<html>
<head>
<style>
p:nth-last-child(n){
color: red;
}
p:nth-last-child(1){
color: blue;
}
</style>
</head>
<body>
<h3>Styled all paragraphs with red color.</h3>
<h3>Sets the text color of the last paragraph to blue.</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>It is a long established fact that a reader will be distracted by the readable content.</p>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
<p>The standard chunk of Lorem Ipsum used since the 1500s</p>
</body>
</html>
CSS :nth-last-child() - <选择器>
带有 <selector> 元素的 :nth-last-child() 伪类的语法:
li:nth-last-child(even of .fruits) {
/* Your styles here */
}
将选择器 li.fruits 移到函数外部将选择具有 fruits 类的所有 li 元素,无论它们在子元素列表中的位置如何。
li.fruits: nth-last-child(-n + 3);
下面是一个示例,说明如何使用 :nth-last-child(even of .fruits) 伪类来表示类为 .fruits 的特定项目−
<html>
<head>
<style>
ul {
list-style-type: none;
}
li {
display: inline-block;
border: 3px solid black;
margin: 5px;
padding: 5px;
}
.fruits {
background-color: pink;
}
li:nth-last-child(1 of .fruits) {
font-weight: bold;
color: blue;
}
</style>
</head>
<body>
<h3>Styling list items with the class fruits to have a pink background.</h3>
<h3>Counting from the last child, styling first child element of the fruits class.</h3>
<ul>
<li>Orange</li>
<li>Apple</li>
<li class="fruits">Mango</li>
<li>Grapes</li>
<li class="fruits">Banana</li>
<li>Watermelon</li>
<li class="fruits">Cheery</li>
<li class="fruits">Pear</li>
</ul>
</body>
</html>