css渐变斑马条纹

Scenario: you are the developer of a website for a band called The Tramps, who have embarked on a cross-Canada tour. To support this you have made a tour page on the site with a table of concert dates, with buttons to buy tickets for each venue. The HTML for the table is:

场景：您是一个名为The Tramps乐队的网站的开发人员，该乐队已开始跨加拿大巡演。 为了支持这一点，您在网站上创建了一个游览页面，其中包含演唱会日期表，并带有用于购买每个场地门票的按钮。 该表HTML是：

<table><caption>The Tramps Tour Dates - Subject To Change</caption><tr><th>Date<th>Location<th>Time<tr><td>November 22<td>The Flying Barstool, NB<td>7.00 pm<tr><td>November 28<td>The Rusty Schooner, NS<td>9.00 pm<tr><td>December 24<td>The Empty Jug, NS<td>8.00 pm<tr><td>December 25<td>Lobstercatch Xmas Party<td>8.00 pm
</table>

This is an entirely appropriate use of a table: the concert dates are truly tabular data, with relevant, related information in each row. As we add more tour dates, we realize that the table is becoming more difficult to read. Let’s add some basic CSS to customize the appearance of the table:

这完全是一个表格的用法：演唱会日期是真正的表格数据，每行中都有相关的相关信息。 随着我们增加更多的旅行日期，我们意识到表格变得越来越难以阅读。 让我们添加一些基本CSS来定制表的外观：

table {border-collapse: collapse;font-family: Calluna Sans, Arial, sans-serif;
}
caption {font-size: larger;margin-bottom: 1em;
}
th { background: #000; color: white;
}
td { padding: 1em; }

… but as we add still more dates, the table becomes harder and harder to read. We need a way to clearly distinguish between rows: a typical solution is to give every other row a different background color. With basic CSS we could create a class to accomplish this, as the style is used repeatedly on the page, but is not applicable to every use of the <tr> element:

…但是随着我们添加更多的日期，表格变得越来越难阅读。 我们需要一种清晰地区分行的方法：一种典型的解决方案是为其他行赋予不同的背景色。 使用基本的CSS，我们可以创建一个class来实现此目的，因为样式在页面上反复使用，但不适用于<tr>元素的每次使用：

tr.highlight {background-color: #cc9;
}

We would then modify our HTML to match the affected rows to the CSS:

然后，我们将修改HTML以将受影响的行与CSS匹配：

<table><caption>The Tramps Tour Dates - Subject To Change</caption><tr><th>Date<th>Location<th>Time<tr><td>November 22<td>The Flying Barstool, NB<td>7.00 pm<tr class="highlight"><td>November 28<td>The Rusty Schooner, NS<td>9.00 pm<tr><td>December 24<td>The Empty Jug, NS<td>8.00 pm<tr class="highlight"><td>December 25<td>Lobstercatch Xmas Party<td>8.00 pm
</table>

While there is nothing wrong with this approach - it works perfectly well if you know all of the dates and venues in advance, and nothing changes – the reality is that The Tramps are a new screamo metal band. The tour van breaks down, gigs are cancelled, the lead singer loses his voice for several days, new gigs are found on the road and added to the tour schedule, etc. In response, you are asked to constantly alter, add, and remove table rows. This disorders the table, forcing you to move and re-apply classes every time a change is made. Your attempt to make the tour schedule more legible will increase your workload exponentially.

尽管这种方法没有什么问题-如果您提前知道所有日期和地点，并且效果没有变化，则效果很好-事实是，The Tramps是一支崭新的尖叫金属乐队。 游览车发生故障，演出被取消，主唱连续几天失去发言权，在路上发现新的演出并被添加到巡回行程中，等等。作为回应，要求您不断更改，添加和删除表行。 这会使表混乱，迫使您每次进行更改时都要移动并重新申请课程。 您尝试使旅行计划更加清晰明了将使您的工作量成倍增加。

Traditionally, this is where JavaScript or some other language has to be brought in, as basic CSS cannot handle iteration. In “traditional” CSS, elements on a web page could only have styles applied if they were in certain contexts or states, or if they had a class or id applied. There was nothing in CSS that allowed a statement like “make every fifth paragraph look this way.”

传统上，这是必须引入JavaScript或其他语言的地方，因为基本CSS无法处理迭代。 在“传统” CSS中，网页上的元素只有在特定的上下文或状态下，或者在应用了class或id情况下，才可以应用样式。 CSS中没有任何东西允许这样的声明：“使每五个段落看起来都这样。”

One of the first pieces of JavaScript I ever wrote was to accomplish exactly this result. It was more than two dozen lines of code written to achieve a single effect. You can now accomplish the same appearance in a single line of CSS, while reducing markup at the same time.

我写过的第一批JavaScript之一就是要完全实现这一结果。 为了达到单一效果，编写了超过两行代码。 现在，您可以在一行CSS中完成相同的外观，同时减少标记。

After removing the classes from the markup (reverting to the table code we had at the start of this lesson), replace the tr.highlight declaration in the style sheet with this:

从标记中删除类之后(恢复到本课开始时使用的表代码)，将样式表中的tr.highlight声明替换为：

tr:nth-child(odd) {background-color: #cc9;
}

n is the first mathematical expression you learned as a child: it is the set of natural counting numbers (1, 2, 3, 4… ), incrementing to infinity. The term “child” comes from the concept of the Document Object Model: the fact that in a well-written, valid, HTML document, every element is a descendant of the html element. The <head> and <body> elements are the two immediate “children” of the <html> tag, just as table rows are children of the <table> tag. (They are not, however, the only children of <table>. The <caption> tag is a child too, which is why we must specify that we are working on table rows in our style sheet declaration.)

n是您孩提时学习的第一个数学表达式：它是自然计数数字(1、2、3、4…)的集合，递增到无穷大。 术语“子级”来自文档对象模型的概念：在编写良好，有效的HTML文档中，每个元素都是html元素的后代。 <head>和<body>元素是<html>标记的两个直接“子代”，就像表行是<table>标记的子代一样。 (但是，它们不是<table>的唯一子代。 <caption>标记也是一个子代，这就是为什么我们必须在样式表声明中指定要处理表行的原因。)

(Note that the first row in our table, the one that contains our table headers, does not appear to have changed, due to the background-color applied to the th cells “covering up” the background-color on the row itself).

(请注意，在我们的表的第一行，包含我们的表头中的一个，不会出现已经改变了，由于background-color应用到th细胞“掩盖”的background-color上该行本身)。

nth-child is a pseudo-selector. The expression in the parentheses immediately after it may take the keyword odd, even or an expression. For example, tr:nth-child(2n), meaning 2 × n, would be equivalent to tr:nth-child(even). n increments naturally, from 1 to 2 to 3 to 4 and so on, so the expression would yield:

nth-child是伪选择器。 紧随其后的括号中的表达式可以采用关键字odd ， even或表达式。 例如， tr:nth-child(2n)表示2 × n等效于tr:nth-child(even). n tr:nth-child(even). n自然增加，从1到2到3到4，依此类推，因此表达式将产生：

… and so on. You can make the expression more complex: tr:nth-child(10n-9) would mean:

… 等等。 您可以使表达式更复杂： tr:nth-child(10n-9)表示：

…and so on.

…等等。

This can be applied to many other kinds of markup, not just tables. If you wanted to make every second list item in an unordered list with an id of example appear bold, you could write the following declaration:

这可以应用于许多其他种类的标记，而不仅仅是表格。 如果要使id为example的无序列表中的第二个列表项显示为粗体，则可以编写以下声明：

ol#example li:nth-child(even) {font-weight: bolder;
}

If you wanted to have every odd <div> with a class of product-example used on a page to have a black border (assuming that you have an earlier rule applying a blue border to <div> elements) you could write:

如果您想让每个奇数<div>带有用于页面上的黑色边框的product-example类(假设您有更早的规则将蓝色边框应用于<div>元素)，则可以编写：

div.product-example:nth-child(odd) {border-color: black;
}

画龙点睛 (Finishing Touches)

There are a few features we could add to the table to enhance its usability. One would be to make it very clear which concert date the user was interested in by highlighting the row that the cursor is over:

我们可以在表中添加一些功能以增强其可用性。 一种方法是通过突出显示光标所在的行来非常清楚用户感兴趣的演唱会日期：

tr:hover {background-color: #f90;
}

Most web developers assume that the :hover pseudo selector can only be applied to links, but in reality the W3C specification allows :hover to be applied to almost any element.

大多数Web开发人员都假定:hover伪选择器只能应用于链接，但实际上W3C规范允许:hover可以应用于几乎任何元素。

翻译自: https://thenewcode.com/84/Creating-Zebra-Striped-Tables

css渐变斑马条纹