initial commit

1 files changed, 193 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/_colon_nth-last-child/index.html b/files/zh-cn/web/css/_colon_nth-last-child/index.html
new file mode 100644
index 0000000000..baeb70ba57
--- /dev/null
+++ b/files/zh-cn/web/css/_colon_nth-last-child/index.html
@@ -0,0 +1,193 @@
+---
+title: ':nth-last-child'
+slug: 'Web/CSS/:nth-last-child'
+tags:
+  - ':nth-child'
+  - ':nth-last-child'
+  - 伪类
+translation_of: 'Web/CSS/:nth-last-child'
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>:nth-last-child()</code></strong> 这个<a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes">伪类</a> 从兄弟节点中从后往前匹配处于某些位置的元素</p>
+
+<pre class="brush: css no-line-numbers">/* 在所有兄弟节点中，从后往前
+   选择所有4的倍数的节点 */
+:nth-last-child(4n) {
+  color: lime;
+}</pre>
+
+<div class="note">
+<p><strong>注意:</strong> 这个伪类和 {{Cssxref(":nth-child")}} 基本一致, 但它是从<em>结尾</em>计数, 而不是从开始计数.</p>
+</div>
+
+<h2 id="语法">语法</h2>
+
+<p><code>nth-last-child</code>伪类接受一个参数, 用来作为一个模式，从后往前匹配元素.</p>
+
+<h3 id="Keyword_values">Keyword values</h3>
+
+<dl>
+ <dt><code>odd</code></dt>
+ <dd>代表一些元素，它们在所在的兄弟节点中，从后往前计算的数字位置是奇数，比如: 1, 3, 5等.</dd>
+ <dt><code>even</code></dt>
+ <dd>代表一些元素，它们在所在的兄弟节点中，从后往前计算的数字位置是偶数，比如: 2, 4, 6等.</dd>
+</dl>
+
+<h3 id="Functional_notation">Functional notation</h3>
+
+<dl>
+ <dt><code>&lt;An+B&gt;</code></dt>
+ <dd>代表一些元素，它们在所在兄弟节点中的数字位置满足模式 <code>An+B</code>, <code>n</code>是0或者任意的正整数. 从结尾开始计算的第一个元素的索引值是<code>1</code>. <code>A</code> 和 <code>B</code> 必须都是 {{cssxref("&lt;integer&gt;")}}.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="选择器示例">选择器示例</h3>
+
+<dl>
+ <dt><code>tr:nth-last-child(odd)</code> or <code>tr:nth-last-child(2n+1)</code></dt>
+ <dd>表示HTML表的倒数的奇数行:1、3、5等。</dd>
+ <dt><code>tr:nth-last-child(even)</code> or <code>tr:nth-last-child(2n)</code></dt>
+ <dd>表示HTML表的倒数的偶数行:2、4、6等。</dd>
+ <dt><code>:nth-last-child(7)</code></dt>
+ <dd>表示倒数第7个元素。</dd>
+ <dt><code>:nth-last-child(5n)</code></dt>
+ <dd>表示倒数的第5、10、15等元素。</dd>
+ <dt><code>:nth-last-child(3n+4)</code></dt>
+ <dd>表示倒数的第4、7、10、13等元素。</dd>
+ <dt><code>:nth-last-child(-n+3)</code></dt>
+ <dd>表示一组兄弟节点中的最后三个元素。</dd>
+ <dt><code>p:nth-last-child(n)</code> or <code>p:nth-last-child(n+1)</code></dt>
+ <dd>表示一组兄弟节点中的每个<code>&lt;p&gt;</code>元素。这与一个简单的<code>p</code>选择器相同。(由于<code>n</code>从0开始，而最后一个元素从1开始，<code>n</code>和<code>n+1</code>都会选择相同的元素。)</dd>
+ <dt><code>p:nth-last-child(1)</code> or <code>p:nth-last-child(0n+1)</code></dt>
+ <dd>表示所有处于兄弟节点中倒数第一位的元素<code>&lt;p&gt;</code>。这与{{cssxref(":last-child")}}选择器相同。</dd>
+</dl>
+
+<h3 id="Table_example">Table example</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;First line&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+       &lt;td&gt;Second line&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+       &lt;td&gt;Third line&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+       &lt;td&gt;Fourth line&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+       &lt;td&gt;Fifth line&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">table {
+  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>
+
+<h4 id="结果">结果</h4>
+
+<p>{{EmbedLiveSample('Table_example', 300,150)}}</p>
+
+<h3 id="Quantity_query">Quantity query</h3>
+
+<p>数量查询样式元素取决于它们的数量。在本例中，当给定列表中至少有三个列表项时，列表项变为红色。这是通过组合<code>nth-last-child</code>和 <a href="/zh-CN/docs/Web/CSS/General_sibling_selectors">通用兄弟选择器</a>.的功能来实现的</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;h4&gt;A list of four items (styled):&lt;/h4&gt;
+&lt;ol&gt;
+  &lt;li&gt;One&lt;/li&gt;
+  &lt;li&gt;Two&lt;/li&gt;
+  &lt;li&gt;Three&lt;/li&gt;
+  &lt;li&gt;Four&lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;h4&gt;A list of two items (unstyled):&lt;/h4&gt;
+&lt;ol&gt;
+  &lt;li&gt;One&lt;/li&gt;
+  &lt;li&gt;Two&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">/* If there are at least three list items,
+   style them all */
+li:nth-last-child(n+3),
+li:nth-last-child(n+3) ~ li {
+  color: red;
+}</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample('Quantity_query', '100%', 270)}}</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#nth-last-child-pseudo', ':nth-last-child') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#nth-last-child-pseudo', ':nth-last-child') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("css.selectors.nth-last-child")}}</p>
+
+<h2 id="See_also" name="See_also">相关资料</h2>
+
+<ul>
+ <li>{{ Cssxref(":nth-child") }}</li>
+ <li><a href="https://alistapart.com/article/quantity-queries-for-css">Quantity Queries for CSS</a></li>
+</ul>