css后代选择器:nth

CSS writers are the blind swordsmen of web development: we pen declarations and throw them at HTML documents hoping that something might stick, but rarely are we aware of the specific content of a selected element: the question of how many words are in a paragraph, or if it contains any words at all, has traditionally been the responsibility of JavaScript, PHP, and other languages.

CSS编写者是Web开发的盲目剑客：我们写一些声明，然后将它们扔到HTML文档上，希望可能会留下一些痕迹，但我们很少意识到所选元素的具体内容 ：一个段落中有多少个单词的问题，或者如果它根本不包含任何单词，传统上就是JavaScript ， PHP和其他语言的责任。

Very often server-side languages will be employed to fire dynamic content into HTML containers on a page. When such an operation fails, front-end developers deserve equal time to address the issue: rather than trying to code around a load problem using only JavaScript and PHP, we can add CSS to style the empty containers.

通常，将使用服务器端语言将动态内容发射到页面上HTML容器中。 当这样的操作失败时，前端开发人员应有同等的时间来解决该问题：我们可以添加CSS来为空容器设置样式，而不是尝试仅使用JavaScript和PHP来解决负载问题。

处理空细胞的奥秘 (Treating the Mystery of the Empty Cell)

Frequently tables are filled with dynamic data, but some cells in the table may have missing information. Usually, these cells are just left blank, but you might want to emphasize their lack of content in other ways.

通常， 表中填充有动态数据，但是表中的某些单元格可能缺少信息。 通常，这些单元格只是空白，但您可能想以其他方式强调它们缺少内容。

A good example might be a table that shows the distances between cities. Naturally, there will be no mileage information between a city and itself, creating a series of empty cells.

一个很好的例子可能是一张显示城市之间距离的表格。 自然，城市与城市之间将不会有里程信息，从而会创建一系列的空单元。

The markup for the table is as follows (I’m using HTML5 shortcuts for speed):

该表的标记如下(我使用HTML5快捷键来提高速度)：

<table>
<caption>Distances Between Cities On The Pacific Rim (miles)</caption>
<col><col><col><col>
<tr><th><th scope=col>Auckland<th scope=col>Papeete<th scope=col>Los Angeles
<tr><th scope=row>Auckland<td><td>2542<td>6518
<tr><th scope=row>Papeete<td>2542<td><td>4114
<tr><th scope=row>Los Angeles<td>6518<td>4114<td>
</table>

This is a good use-case for :empty as the vacant cells must be included in order for the table to be valid and present well.  With :empty, targeting the cells that lack content is easy:

这对于:empty是一个很好的用例，因为必须包含空单元格才能使表有效并正确显示。 使用:empty ，轻松定位缺少内容的单元格：

td:empty { background: #777; }

Note the structure of the code at the very end of the table, with the closing </table> tag right next to the last, empty <td> element. If that was not the case, the sole <td> tag would be treated as being “open” and not empty. (An alternative approach would be an opening and closing <td></td> with no space between them).

注意表末尾的代码结构，最后一个空的<td>元素旁边是</table>标记。 如果不是这种情况，唯一的<td>标签将被视为“打开”而不是空的。 (另一种方法是打开和关闭<td></td>之间没有空格)。

While odd, it should also be noted that you can combine the :empty and :not selectors to style cells that are filled:

虽然很奇怪，但也应注意，您可以结合使用:empty和:not选择器来设置填充单元格的样式：

td:not(:empty) { /* styles for filled cells */ }

This would be an unusual approach, as our assumption is that the majority of cells have content and can be addressed with a simple td selector, but it is still a valid approach in CSS.

这将是一种不寻常的方法，因为我们的假设是大多数单元格都有内容，并且可以使用简单的td选择器进行寻址，但这在CSS中仍然是有效的方法。

修复缺失的环节 (Rehabilitating The Missing Link)

Navigation for a site is often dynamically generated, sometimes incompletely. It’s possible to have space reserved for a link that never appears, or does so only fitfully. While this usually implies that your backend developers need to do more work, there’s a simple CSS solution that will make site navigation appear less like a gap-toothed smile in the interim:

网站导航通常是动态生成的，有时是不完整的。 可以为从未出现或仅适当出现的链接保留空间。 尽管这通常意味着您的后端开发人员需要做更多的工作，但是有一个简单CSS解决方案可以使网站导航在过渡期间看起来像齿隙般的微笑：

nav[role="navigation"] a:empty { display: none; pointer-events: none; }

This means that a link with an href attribute value but no content will not be rendered in the browser. So taking this output HTML:

这意味着具有href属性值但没有内容的链接将不会在浏览器中呈现。 因此，采用以下输出HTML：

<nav role="navigation">
<a href="index.html">Home</a>
<a href="contact.html">Contact</a>
<a href="tools.html">Tools</a>
<a href="classes.html"></a>
</nav>

… and adding the CSS above, will result in the last, empty tag not appearing. (In this case pointer-events is somewhat redundant, as the link won’t appear at all, and can’t be clicked in any case, but it’s a useful backup technique).

…并在上面添加CSS，将导致最后一个空标签不显示。 (在这种情况下， pointer-events有点多余，因为链接根本不会出现，在任何情况下都无法单击，但这是一种有用的备份技术)。

：empty异常 (:empty Exceptions)

Note that whitespace between an opening and closing tag counts as character information, as do any tags inside the targeted element. So the following is not considered an empty element:

请注意，开始和结束标签之间的空白与目标元素内的所有标签一样，都视为字符信息 。 因此以下内容不视为空元素：

<a href="classes.html"> </a>

Neither is this:

这也不是：

<a href="classes.html"><span></span></a>

As mentioned above, tags that are not closed, even if doing so is optional in HTML, do not count as empty, even if they have no content. A single paragraph is “open”, and therefore not empty:

如上所述，即使未关闭的标记在HTML中是可选的，即使它们没有内容，也不会算作空。 单个段落是“开放”的，因此不能为空 ：

<p>

Although such a tag with no carriage return between it and the next one would be:

尽管这样的标签与下一个标签之间没有回车符，但它可能是：

<p><p>

In the example above, the first paragraph would be empty, but the second (assuming nothing else came immediately after it) would not be.

在上面的示例中，第一段为空，但是第二段(假定紧随其后没有其他内容)将为空。

“Self-closed” elements are counted as being empty: <br>, horizontal rules, <img>, etc will respond to :empty.

“自动关闭”元素被认为是空的： <br> ， 水平尺 ， <img>等将响应:empty 。

Elements are counted as being empty if comments are their sole content:

元素都算作是空的，如果评论是他们唯一的内容：

<p><!--this paragraph is empty --></p>

使用：empty作为代码的可视化质量检查测试 (Using :empty as a visual QA test for code)

Inevitably, some developers get lazy. “Hey, I need more space under this element. I know, I’ll just add an empty paragraph".

不可避免地，一些开发人员会变得懒惰。 “嘿，我需要在此元素下留出更多空间。 我知道，我将添加一个空的段落”。

<p>Some actual content…
<p></p>

Or, even worse, a <br> tag. This empty, “filler" markup gets in the way of well-written CSS, while being notoriously difficult to track down. We can use :empty as a quick visual check of pages for vestigial markup:

甚至更糟的是<br>标签。 这个空的，“填充”的标记妨碍了编写良好CSS的方式，但是众所周知，要追踪它非常困难，我们可以使用:empty来快速直观地检查页面的残留标记：

*:empty, br { border: 2px solid red; }

浏览器支持和结论 (Browser support & conclusion)

:empty has very good support: every modern browser, including IE9+, recognizes the selector.

:empty有很好的支持：每个现代的浏览器，包括IE9 +，都可以识别选择器。

There are many more possibilities for :empty: you’ll see one next month, in the redesign of this blog.

:empty还有更多可能性:empty下个月，在重新设计此博客时，您将看到一个。

翻译自: https://thenewcode.com/692/Vanishing-Acts-The-CSS-empty-Selector

css后代选择器:nth