css匹配倒数第n个子元素:nth-last-child()的用法示例【css选择器】
<h1 style="margin: 0px 0px 1em; padding: 0px; clear: both; line-height: 1.5; color: rgb(68, 170, 68); font-family: Arial, "Microsoft YaHei", SimSun, Helvetica, Tahoma, sans-serif, serif; white-space: normal; background-color: rgb(255, 255, 255);">:nth-last-child()</h1><p class="v" style="margin-top: 30px; margin-bottom: 1em; padding: 0px; font-family: Arial, "Microsoft YaHei", SimSun, Helvetica, Tahoma, sans-serif, serif; font-size: 19.2px; white-space: normal; background-color: rgb(255, 255, 255);">版本：<em style="margin: 0px 6px 0px 3px; padding: 0px; display: inline-block; color: rgb(255, 102, 0);">CSS3</em></p><p class="description" style="margin: 10px auto; padding: 14px 20px; clear: both; border: 1px solid rgb(226, 231, 231); border-radius: 6px; background: rgb(252, 252, 252); overflow: hidden; font-family: Arial, "Microsoft YaHei", SimSun, Helvetica, Tahoma, sans-serif, serif; font-size: 19.2px; white-space: normal;">:nth-last-child()，这个CSS 伪类，从兄弟节点中从后往前匹配，处于某些位置的元素。<strong style="margin: 0px 4px; padding: 0px; display: inline-block;">注意</strong>:这个伪类和<code style="margin: 0px 6px; padding: 4px 10px; display: inline-block; line-height: 1em; border: 1px solid rgb(231, 231, 231); border-radius: 4px; background: rgb(241, 241, 241); font-family: Consolas, "Courier New", Courier, monospace;">:nth-child()</code>基本一致，但它是从结尾计数，而不是从开始计数。</p><h2 style="margin: 1.8em 0px 0px; padding: 1.2em 0px 1em; font-size: 1.8em; border: none; color: rgb(68, 170, 68); font-family: Arial, "Microsoft YaHei", SimSun, Helvetica, Tahoma, sans-serif, serif; white-space: normal; background-color: rgb(255, 255, 255);">语法:</h2><blockquote style="margin: 0px 0px 20px; padding: 15px 30px; border: 1px solid rgb(204, 204, 204); border-radius: 6px; font-family: Consolas, "Courier New", Courier, Arial, "Microsoft YaHei", SimSun, Helvetica; white-space: pre-wrap; overflow-wrap: break-word; word-break: break-all; background: rgb(244, 244, 244); font-size: 19.2px;"><m style="margin: 0px 4px; padding: 0px; display: inline-block; color: rgb(0, 0, 255);">E</m>:nth-last-child(<m style="margin: 0px 4px; padding: 0px; display: inline-block; color: rgb(0, 0, 255);">n</m>){<var style="margin: 0px 4px; padding: 0px; display: inline-block; color: rgb(0, 153, 51);">sRules</var>}</blockquote><p style="margin-top: 0px; margin-bottom: 1em; padding: 0px; font-family: Arial, "Microsoft YaHei", SimSun, Helvetica, Tahoma, sans-serif, serif; font-size: 19.2px; white-space: normal; background-color: rgb(255, 255, 255);"><strong style="margin: 0px; padding: 0px;">匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效。</strong></p><ul style="list-style-type: none;" class=" list-paddingleft-2"><li>要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是<code style="margin: 0px 6px; padding: 4px 10px; display: inline-block; line-height: 1em; border: 1px solid rgb(231, 231, 231); border-radius: 4px; background: rgb(241, 241, 241); font-family: Consolas, "Courier New", Courier, monospace;"><body></code>，即E可以是<code style="margin: 0px 6px; padding: 4px 10px; display: inline-block; line-height: 1em; border: 1px solid rgb(231, 231, 231); border-radius: 4px; background: rgb(241, 241, 241); font-family: Consolas, "Courier New", Courier, monospace;"><body></code>的子元素</li><li>该选择符允许使用一个<em style="margin: 0px 6px 0px 3px; padding: 0px; display: inline-block; color: rgb(255, 102, 0);">乘法因子</em>(<m style="margin: 0px 4px; padding: 0px; display: inline-block; color: rgb(0, 0, 255);">n</m>)来作为换算方式，比如我们想选中倒数第一个子元素E，那么选择符可以写成:<code style="margin: 0px 6px; padding: 4px 10px; display: inline-block; line-height: 1em; border: 1px solid rgb(231, 231, 231); border-radius: 4px; background: rgb(241, 241, 241); font-family: Consolas, "Courier New", Courier, monospace;">E:nth-last-child(1)</code></li></ul><p style="margin-top: 0px; margin-bottom: 1em; padding: 0px; font-family: Arial, "Microsoft YaHei", SimSun, Helvetica, Tahoma, sans-serif, serif; font-size: 19.2px; white-space: normal; background-color: rgb(255, 255, 255);"><code style="margin: 0px 6px; padding: 4px 10px; display: inline-block; line-height: 1em; border: 1px solid rgb(231, 231, 231); border-radius: 4px; background: rgb(241, 241, 241); font-family: Consolas, "Courier New", Courier, monospace;">:nth-last-child()</code>伪类接受一个参数，用来作为一个模式，从后往前匹配元素。<m style="margin: 0px 4px; padding: 0px; display: inline-block; color: rgb(0, 0, 255);">n</m>值如下：</p><ul style="list-style-type: none;" class=" list-paddingleft-2"><li><m style="margin: 0px 4px; padding: 0px; display: inline-block; color: rgb(0, 0, 255);">odd</m>代表奇数，它们在所在的兄弟节点中，从后往前计算的数字位置是奇数，比如: 1, 3, 5等.</li><li><m style="margin: 0px 4px; padding: 0px; display: inline-block; color: rgb(0, 0, 255);">even</m>代表偶数，它们在所在的兄弟节点中，从后往前计算的数字位置是偶数，比如: 2, 4, 6等.</li><li><code style="margin: 0px 6px; padding: 4px 10px; display: inline-block; line-height: 1em; border: 1px solid rgb(231, 231, 231); border-radius: 4px; background: rgb(241, 241, 241); font-family: Consolas, "Courier New", Courier, monospace;"><An+B></code>代表公式计算，它们在所在兄弟节点中的数字位置满足模式<code style="margin: 0px 6px; padding: 4px 10px; display: inline-block; line-height: 1em; border: 1px solid rgb(231, 231, 231); border-radius: 4px; background: rgb(241, 241, 241); font-family: Consolas, "Courier New", Courier, monospace;">An+B</code>,<code style="margin: 0px 6px; padding: 4px 10px; display: inline-block; line-height: 1em; border: 1px solid rgb(231, 231, 231); border-radius: 4px; background: rgb(241, 241, 241); font-family: Consolas, "Courier New", Courier, monospace;">n</code>是0或者任意的正整数。从结尾开始计算的第一个元素的索引值是<code style="margin: 0px 6px; padding: 4px 10px; display: inline-block; line-height: 1em; border: 1px solid rgb(231, 231, 231); border-radius: 4px; background: rgb(241, 241, 241); font-family: Consolas, "Courier New", Courier, monospace;">1</code>.<code style="margin: 0px 6px; padding: 4px 10px; display: inline-block; line-height: 1em; border: 1px solid rgb(231, 231, 231); border-radius: 4px; background: rgb(241, 241, 241); font-family: Consolas, "Courier New", Courier, monospace;">A</code>和<code style="margin: 0px 6px; padding: 4px 10px; display: inline-block; line-height: 1em; border: 1px solid rgb(231, 231, 231); border-radius: 4px; background: rgb(241, 241, 241); font-family: Consolas, "Courier New", Courier, monospace;">B</code>必须都是<em style="margin: 0px 6px 0px 3px; padding: 0px; display: inline-block; color: rgb(255, 102, 0);">整数</em>.</li></ul><h3 style="margin: 1.5em 0px 1em; padding: 0px; font-size: 1.4em; font-family: Arial, "Microsoft YaHei", SimSun, Helvetica, Tahoma, sans-serif, serif; white-space: normal; background-color: rgb(255, 255, 255);">选择器示例</h3><ul style="list-style-type: none;" class=" list-paddingleft-2"><li><code style="margin: 0px 6px; padding: 4px 10px; display: inline-block; line-height: 1em; border: 1px solid rgb(231, 231, 231); border-radius: 4px; background: rgb(241, 241, 241); font-family: Consolas, "Courier New", Courier, monospace;">tr:nth-last-child(odd)</code>或<code style="margin: 0px 6px; padding: 4px 10px; display: inline-block; line-height: 1em; border: 1px solid rgb(231, 231, 231); border-radius: 4px; background: rgb(241, 241, 241); font-family: Consolas, "Courier New", Courier, monospace;">tr:nth-last-child(2n+1)</code>表示HTML表的倒数的奇数行:1、3、5等。</li><li><code style="margin: 0px 6px; padding: 4px 10px; display: inline-block; line-height: 1em; border: 1px solid rgb(231, 231, 231); border-radius: 4px; background: rgb(241, 241, 241); font-family: Consolas, "Courier New", Courier, monospace;">tr:nth-last-child(even)</code>或<code style="margin: 0px 6px; padding: 4px 10px; display: inline-block; line-height: 1em; border: 1px solid rgb(231, 231, 231); border-radius: 4px; background: rgb(241, 241, 241); font-family: Consolas, "Courier New", Courier, monospace;">tr:nth-last-child(2n)</code>表示HTML表的倒数的偶数行:2、4、6等。</li><li><code style="margin: 0px 6px; padding: 4px 10px; display: inline-block; line-height: 1em; border: 1px solid rgb(231, 231, 231); border-radius: 4px; background: rgb(241, 241, 241); font-family: Consolas, "Courier New", Courier, monospace;">:nth-last-child(7)</code>表示倒数第7个元素。</li><li><code style="margin: 0px 6px; padding: 4px 10px; display: inline-block; line-height: 1em; border: 1px solid rgb(231, 231, 231); border-radius: 4px; background: rgb(241, 241, 241); font-family: Consolas, "Courier New", Courier, monospace;">:nth-last-child(5n)</code>表示倒数的第5、10、15等元素。</li><li><code style="margin: 0px 6px; padding: 4px 10px; display: inline-block; line-height: 1em; border: 1px solid rgb(231, 231, 231); border-radius: 4px; background: rgb(241, 241, 241); font-family: Consolas, "Courier New", Courier, monospace;">:nth-last-child(3n+4)</code>表示倒数的第4、7、10、13等元素。</li><li><code style="margin: 0px 6px; padding: 4px 10px; display: inline-block; line-height: 1em; border: 1px solid rgb(231, 231, 231); border-radius: 4px; background: rgb(241, 241, 241); font-family: Consolas, "Courier New", Courier, monospace;">:nth-last-child(-n+3)</code>表示一组兄弟节点中的最后三个元素。</li><li><code style="margin: 0px 6px; padding: 4px 10px; display: inline-block; line-height: 1em; border: 1px solid rgb(231, 231, 231); border-radius: 4px; background: rgb(241, 241, 241); font-family: Consolas, "Courier New", Courier, monospace;">p:nth-last-child(n)</code>或<code style="margin: 0px 6px; padding: 4px 10px; display: inline-block; line-height: 1em; border: 1px solid rgb(231, 231, 231); border-radius: 4px; background: rgb(241, 241, 241); font-family: Consolas, "Courier New", Courier, monospace;">p:nth-last-child(n+1)</code>表示一组兄弟节点中的每个<code style="margin: 0px 6px; padding: 4px 10px; display: inline-block; line-height: 1em; border: 1px solid rgb(231, 231, 231); border-radius: 4px; background: rgb(241, 241, 241); font-family: Consolas, "Courier New", Courier, monospace;"><p></code>元素。这与一个简单的<code style="margin: 0px 6px; padding: 4px 10px; display: inline-block; line-height: 1em; border: 1px solid rgb(231, 231, 231); border-radius: 4px; background: rgb(241, 241, 241); font-family: Consolas, "Courier New", Courier, monospace;">p</code>选择器相同。(由于<code style="margin: 0px 6px; padding: 4px 10px; display: inline-block; line-height: 1em; border: 1px solid rgb(231, 231, 231); border-radius: 4px; background: rgb(241, 241, 241); font-family: Consolas, "Courier New", Courier, monospace;">n</code>从0开始，而最后一个元素从1开始，<code style="margin: 0px 6px; padding: 4px 10px; display: inline-block; line-height: 1em; border: 1px solid rgb(231, 231, 231); border-radius: 4px; background: rgb(241, 241, 241); font-family: Consolas, "Courier New", Courier, monospace;">n</code>和<code style="margin: 0px 6px; padding: 4px 10px; display: inline-block; line-height: 1em; border: 1px solid rgb(231, 231, 231); border-radius: 4px; background: rgb(241, 241, 241); font-family: Consolas, "Courier New", Courier, monospace;">n+1</code>都会选择相同的元素。)</li><li><code style="margin: 0px 6px; padding: 4px 10px; display: inline-block; line-height: 1em; border: 1px solid rgb(231, 231, 231); border-radius: 4px; background: rgb(241, 241, 241); font-family: Consolas, "Courier New", Courier, monospace;">p:nth-last-child(1)</code>或<code style="margin: 0px 6px; padding: 4px 10px; display: inline-block; line-height: 1em; border: 1px solid rgb(231, 231, 231); border-radius: 4px; background: rgb(241, 241, 241); font-family: Consolas, "Courier New", Courier, monospace;">p:nth-last-child(0n+1)</code>表示所有处于兄弟节点中倒数第一位的元素<code style="margin: 0px 6px; padding: 4px 10px; display: inline-block; line-height: 1em; border: 1px solid rgb(231, 231, 231); border-radius: 4px; background: rgb(241, 241, 241); font-family: Consolas, "Courier New", Courier, monospace;"><p></code>。这与<code style="margin: 0px 6px; padding: 4px 10px; display: inline-block; line-height: 1em; border: 1px solid rgb(231, 231, 231); border-radius: 4px; background: rgb(241, 241, 241); font-family: Consolas, "Courier New", Courier, monospace;">:last-child</code>选择器相同。</li></ul><h2 style="margin: 1.8em 0px 0px; padding: 1.2em 0px 1em; font-size: 1.8em; border-top: 1px solid rgb(226, 226, 226); color: rgb(68, 170, 68); font-family: Arial, "Microsoft YaHei", SimSun, Helvetica, Tahoma, sans-serif, serif; white-space: normal; background-color: rgb(255, 255, 255);">注意</h2><pre style="margin-top: 0px; margin-bottom: 20px; padding: 20px 30px; border-left: 10px solid rgb(68, 170, 68); font-family: Consolas, "Courier New", Courier, monospace; white-space: pre-wrap; overflow-wrap: break-word; word-break: break-all; background-color: rgb(251, 251, 249); border-radius: 10px; box-shadow: rgb(204, 204, 204) 0px 0px 2px inset; line-height: 28px; font-size: 19.2px;"><p>第1个p</p><p>第2个p</p>
<span>第1个span</span><p>第3个p</p><span>第2个span</span></pre><p style="margin-top: 0px; margin-bottom: 1em; padding: 0px; font-family: Arial, "Microsoft YaHei", SimSun, Helvetica, Tahoma, sans-serif, serif; font-size: 19.2px; white-space: normal; background-color: rgb(255, 255, 255);">如上HTML，假设要命中倒数第一个p(即正数第3个p)，那么CSS选择符应该是:<code style="margin: 0px 6px; padding: 4px 10px; display: inline-block; line-height: 1em; border: 1px solid rgb(231, 231, 231); border-radius: 4px; background: rgb(241, 241, 241); font-family: Consolas, "Courier New", Courier, monospace;">p:nth-last-child(2){color:#f00;}</code>，而不是:<code style="margin: 0px 6px; padding: 4px 10px; display: inline-block; line-height: 1em; border: 1px solid rgb(231, 231, 231); border-radius: 4px; background: rgb(241, 241, 241); font-family: Consolas, "Courier New", Courier, monospace;">p:nth-last-child(1){color:#f00;}</code>。因为倒数第1个元素是<code<span>< code="" style="margin: 0px; padding: 0px;">，其实是倒数第2个子元素<code style="margin: 0px 6px; padding: 4px 10px; display: inline-block; line-height: 1em; border: 1px solid rgb(231, 231, 231); border-radius: 4px; background: rgb(241, 241, 241); font-family: Consolas, "Courier New", Courier, monospace;"><p></code>。基于选择符从右到左解析，首先要找到第1个子元素，然后再去检查该子元素是否为<code style="margin: 0px 6px; padding: 4px 10px; display: inline-block; line-height: 1em; border: 1px solid rgb(231, 231, 231); border-radius: 4px; background: rgb(241, 241, 241); font-family: Consolas, "Courier New", Courier, monospace;"><p></code>，如果不是，则<m style="margin: 0px 4px; padding: 0px; display: inline-block; color: rgb(0, 0, 255);">n</m>递增，继续查找。</p><div class="demo demo1" style="margin: 0px 0px 20px; padding: 0px 0px 20px; position: relative; clear: both; width: 1157.01px; min-height: 150px; overflow: hidden; font-family: Arial, "Microsoft YaHei", SimSun, Helvetica, Tahoma, sans-serif, serif; font-size: 19.2px; white-space: normal; background-color: rgb(255, 255, 255);"><p style="margin-top: 0px; margin-bottom: 1em; padding: 0px;">第1个p</p><p style="margin-top: 0px; margin-bottom: 1em; padding: 0px;">第2个p</p><span style="margin: 0px; padding: 0px;">第1个span</span><p style="margin-top: 0px; margin-bottom: 1em; padding: 0px;">第3个p</p><span style="margin: 0px; padding: 0px;">第2个span</span></div><p style="margin-top: 0px; margin-bottom: 1em; padding: 0px; font-family: Arial, "Microsoft YaHei", SimSun, Helvetica, Tahoma, sans-serif, serif; font-size: 19.2px; white-space: normal; background-color: rgb(255, 255, 255);">假设不确定倒数第1个子元素是否为E，但是又想命中倒数第1个E，应该这样写:<code style="margin: 0px 6px; padding: 4px 10px; display: inline-block; line-height: 1em; border: 1px solid rgb(231, 231, 231); border-radius: 4px; background: rgb(241, 241, 241); font-family: Consolas, "Courier New", Courier, monospace;">p:last-of-type{color:#f00;}</code>或者这样写:<code style="margin: 0px 6px; padding: 4px 10px; display: inline-block; line-height: 1em; border: 1px solid rgb(231, 231, 231); border-radius: 4px; background: rgb(241, 241, 241); font-family: Consolas, "Courier New", Courier, monospace;">p:nth-last-of-type(1){color:#f00;}</code></p><h2 style="margin: 1.8em 0px 0px; padding: 1.2em 0px 1em; font-size: 1.8em; border-top: 1px solid rgb(226, 226, 226); color: rgb(68, 170, 68); font-family: Arial, "Microsoft YaHei", SimSun, Helvetica, Tahoma, sans-serif, serif; white-space: normal; background-color: rgb(255, 255, 255);">浏览器支持</h2><table class="browser"><tbody style="margin: 0px; padding: 0px;"><tr style="margin: 0px; padding: 0px;" class="firstRow"><td style="margin: 0px; padding-top: 10px; padding-bottom: 10px; border-style: solid; border-color: gainsboro; overflow-wrap: break-word; word-break: break-all; border-width: 1px;"><img src="https://zhuji.jb51.net/uploads/allimg/20240123/1-2401230Z0021B.gif" style="max-width:100%!important;height:auto!important;margin: 0px auto; padding: 0px; vertical-align: top; display: block; text-align: center; overflow: hidden;"/></td><td style="margin: 0px; padding-top: 10px; padding-bottom: 10px; border-style: solid; border-color: gainsboro; overflow-wrap: break-word; word-break: break-all; border-width: 1px;"><img src="https://zhuji.jb51.net/uploads/allimg/20240123/1-2401230Z003R4.gif" style="max-width:100%!important;height:auto!important;margin: 0px auto; padding: 0px; vertical-align: top; display: block; text-align: center; overflow: hidden;"/></td><td style="margin: 0px; padding-top: 10px; padding-bottom: 10px; border-style: solid; border-color: gainsboro; overflow-wrap: break-word; word-break: break-all; border-width: 1px;"><img src="https://zhuji.jb51.net/uploads/allimg/20240123/1-2401230Z003611.gif" style="max-width:100%!important;height:auto!important;margin: 0px auto; padding: 0px; vertical-align: top; display: block; text-align: center; overflow: hidden;"/></td><td style="margin: 0px; padding-top: 10px; padding-bottom: 10px; border-style: solid; border-color: gainsboro; overflow-wrap: break-word; word-break: break-all; border-width: 1px;"><img src="https://zhuji.jb51.net/uploads/allimg/20240123/1-2401230Z003R7.gif" style="max-width:100%!important;height:auto!important;margin: 0px auto; padding: 0px; vertical-align: top; display: block; text-align: center; overflow: hidden;"/></td><td style="margin: 0px; padding-top: 10px; padding-bottom: 10px; border-style: solid; border-color: gainsboro; overflow-wrap: break-word; word-break: break-all; border-width: 1px;"><img src="https://zhuji.jb51.net/uploads/allimg/20240123/1-2401230Z004941.gif" style="max-width:100%!important;height:auto!important;margin: 0px auto; padding: 0px; vertical-align: top; display: block; text-align: center; overflow: hidden;"/></td></tr><tr style="margin: 0px; padding: 0px;"><td colspan="5" style="margin: 0px; padding-top: 10px; padding-bottom: 10px; border-style: solid; border-color: gainsboro; overflow-wrap: break-word; word-break: break-all; border-width: 1px;">IE9+以及新版浏览器都支持<code style="margin: 0px 6px; padding: 4px 10px; display: inline-block; line-height: 1em; border: 1px solid rgb(231, 231, 231); border-radius: 4px; background: rgb(241, 241, 241); font-family: Consolas, "Courier New", Courier, monospace;">:nth-last-child()</code></td></tr></tbody></table><h2 style="margin: 1.8em 0px 0px; padding: 1.2em 0px 1em; font-size: 1.8em; border-top: 1px solid rgb(226, 226, 226); color: rgb(68, 170, 68); font-family: Arial, "Microsoft YaHei", SimSun, Helvetica, Tahoma, sans-serif, serif; white-space: normal; background-color: rgb(255, 255, 255);">例子</h2><pre style="margin-top: 0px; margin-bottom: 20px; padding: 20px 30px; border-left: 10px solid rgb(68, 170, 68); font-family: Consolas, "Courier New", Courier, monospace; white-space: pre-wrap; overflow-wrap: break-word; word-break: break-all; background-color: rgb(251, 251, 249); border-radius: 10px; box-shadow: rgb(204, 204, 204) 0px 0px 2px inset; line-height: 28px; font-size: 19.2px;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p:nth-last-child(3)
{
background:pink;
}
</style>
</head>
<body>
<h1>元素1</h1>
<p>元素2</p>
<p>元素3</p>
<p>元素4</p>
</body>
</html></pre><p style="margin-top: 0px; margin-bottom: 1em; padding: 0px; font-family: Arial, "Microsoft YaHei", SimSun, Helvetica, Tahoma, sans-serif, serif; font-size: 19.2px; white-space: normal; background-color: rgb(255, 255, 255);"><strong style="margin: 0px; padding: 0px;">效果图：</strong></p><p style="margin-top: 0px; margin-bottom: 1em; padding: 0px; font-family: Arial, "Microsoft YaHei", SimSun, Helvetica, Tahoma, sans-serif, serif; font-size: 19.2px; white-space: normal; background-color: rgb(255, 255, 255);"><img src="https://zhuji.jb51.net/uploads/allimg/20240123/1-2401230Z004Q1.jpg" style="max-width:100%!important;height:auto!important;margin: 0px; padding: 0px; vertical-align: top;"/></p><p style="margin-top: 0px; margin-bottom: 1em; padding: 0px; font-family: Arial, "Microsoft YaHei", SimSun, Helvetica, Tahoma, sans-serif, serif; font-size: 19.2px; white-space: normal; background-color: rgb(255, 255, 255);"><code style="margin: 0px 6px; padding: 4px 10px; display: inline-block; line-height: 1em; border: 1px solid rgb(231, 231, 231); border-radius: 4px; background: rgb(241, 241, 241); font-family: Consolas, "Courier New", Courier, monospace;">:nth-last-child()</code>这个CSS伪类从兄弟节点中从后往前匹配处于某些位置的元素</p><pre style="margin-top: 0px; margin-bottom: 20px; padding: 20px 30px; border-left: 10px solid rgb(68, 170, 68); font-family: Consolas, "Courier New", Courier, monospace; white-space: pre-wrap; overflow-wrap: break-word; word-break: break-all; background-color: rgb(251, 251, 249); border-radius: 10px; box-shadow: rgb(204, 204, 204) 0px 0px 2px inset; line-height: 28px; font-size: 19.2px;">/* 在所有兄弟节点中，从后往前
选择所有4的倍数的节点 */
:nth-last-child(4n) {
color: lime;
}</pre><p style="margin-top: 0px; margin-bottom: 1em; padding: 0px; font-family: Arial, "Microsoft YaHei", SimSun, Helvetica, Tahoma, sans-serif, serif; font-size: 19.2px; white-space: normal; background-color: rgb(255, 255, 255);"><strong style="margin: 0px; padding: 0px;">注意:</strong>这个伪类和<code style="margin: 0px 6px; padding: 4px 10px; display: inline-block; line-height: 1em; border: 1px solid rgb(231, 231, 231); border-radius: 4px; background: rgb(241, 241, 241); font-family: Consolas, "Courier New", Courier, monospace;">:nth-child()</code>基本一致，但它是从<em style="margin: 0px 6px 0px 3px; padding: 0px; display: inline-block; color: rgb(255, 102, 0);">结尾</em>计数，而不是从<em style="margin: 0px 6px 0px 3px; padding: 0px; display: inline-block; color: rgb(255, 102, 0);">开始</em>计数.</p><pre style="margin-top: 0px; margin-bottom: 20px; padding: 20px 30px; border-left: 10px solid rgb(68, 170, 68); font-family: Consolas, "Courier New", Courier, monospace; white-space: pre-wrap; overflow-wrap: break-word; word-break: break-all; background-color: rgb(251, 251, 249); border-radius: 10px; box-shadow: rgb(204, 204, 204) 0px 0px 2px inset; line-height: 28px; font-size: 19.2px;">//html<table>
<tbody>
<tr>
<td>first line</td>
</tr>
<tr>
<td>second line</td>
</tr>
<tr>
<td>third line</td>
</tr>
<tr>
<td>fourth line</td>
</tr>
<tr>
<td>fifth line</td>
</tr>
</tbody>
</table>//CSStable {
border: 1px solid blue;
}
/* selects the last three elements */
tr:nth-last-child(-n+3) {
background-color: pink;
}
/* selects every element starting from the second to last item */
tr:nth-last-child(n+2) {
color: blue;
}
/* select only the last second element */
tr:nth-last-child(2) {
font-weight: 600;
}</pre><div class="demo demo3" style="margin: 0px 0px 20px; padding: 0px 0px 20px; position: relative; clear: both; width: 1157.01px; min-height: 150px; overflow: hidden; font-family: Arial, "Microsoft YaHei", SimSun, Helvetica, Tahoma, sans-serif, serif; font-size: 19.2px; white-space: normal; background-color: rgb(255, 255, 255);"><table width="300"><tbody style="margin: 0px; padding: 0px;"><tr style="margin: 0px; padding: 0px; color: blue;" class="firstRow"><td style="margin: 0px; padding-top: 10px; padding-bottom: 10px; border-style: solid; border-color: gainsboro; overflow-wrap: break-word; word-break: break-all; border-width: 1px;">first line</td></tr><tr style="margin: 0px; padding: 0px; color: blue;"><td style="margin: 0px; padding-top: 10px; padding-bottom: 10px; border-style: solid; border-color: gainsboro; overflow-wrap: break-word; word-break: break-all; border-width: 1px;">second line</td></tr><tr style="margin: 0px; padding: 0px; background-color: pink; color: blue;"><td style="margin: 0px; padding-top: 10px; padding-bottom: 10px; border-style: solid; border-color: gainsboro; overflow-wrap: break-word; word-break: break-all; border-width: 1px;">third line</td></tr><tr style="margin: 0px; padding: 0px; background-color: pink; color: blue; font-weight: 600;"><td style="margin: 0px; padding-top: 10px; padding-bottom: 10px; border-style: solid; border-color: gainsboro; overflow-wrap: break-word; word-break: break-all; border-width: 1px;">fourth line</td></tr><tr style="margin: 0px; padding: 0px; background-color: pink;"><td style="margin: 0px; padding-top: 10px; padding-bottom: 10px; border-style: solid; border-color: gainsboro; overflow-wrap: break-word; word-break: break-all; border-width: 1px;">fifth line</td></tr></tbody></table></div><p style="margin-top: 0px; margin-bottom: 1em; padding: 0px; font-family: Arial, "Microsoft YaHei", SimSun, Helvetica, Tahoma, sans-serif, serif; font-size: 19.2px; white-space: normal; background-color: rgb(255, 255, 255);">数量查询样式元素取决于它们的数量。在本例中，当给定列表中至少有三个列表项时，列表项变为红色。这是通过组合<code style="margin: 0px 6px; padding: 4px 10px; display: inline-block; line-height: 1em; border: 1px solid rgb(231, 231, 231); border-radius: 4px; background: rgb(241, 241, 241); font-family: Consolas, "Courier New", Courier, monospace;">:nth-last-child()</code>和通用兄弟选择器的功能来实现的</p>
頁:
[1]