表格样式（奇数和偶数的列颜色，tr:hover 覆盖）答案

【问题标题】：Table Styling (Column colors for odd and even, tr:hover override)表格样式（奇数和偶数的列颜色，tr:hover 覆盖）
【发布时间】：2014-03-11 09:23:24
【问题描述】：

我有一个表格，我希望列具有交替的背景颜色。但是，我想要它，以便当我将鼠标悬停在该行上时，该行中每个单元格的背景颜色都会更改为另一种颜色。我认为这很简单，使用 nth-child 属性和 hover 伪类，但我想不出任何帮助。

下面是我的 html 和 CSS。请原谅我添加了我的整个代码，但我似乎无法确定相关的确切位置。我还是个初学者。我会添加一张图片，但我已经不知何故搞砸了，它不会有帮助。

这个网站有我正在尝试制作的表格类型。 http://metrarail.com/metra/en/home/maps_schedules/metra_system_map/md-n/schedule.full.html

这是我的html

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Metra Train Schedule</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />

    <!-- Attempt at adding favicon-->
    <link rel="icon" href="img/favicon.ico" type="image/x-icon">

    </head>

<body>

<div id="header"><img src="img/Header.jpg" /></div>

<div id="content">


<hgroup>
    <h1 class="paddedleft">Metra Rails</h1>
    <h2 class="paddedleft">District / North Line in Chicago</h2>
</hgroup>



<h3 class="paddedleft"><a href="#inbound">Inbound Schedule</a> |
<a href="#outbound">Outbound Schedule</a></h3>


<p class="paddedleft">
Metra can get you where you need to be, when you need to be there! When riding with metra you are guarenteed that our schedule will be right on time. You will never have to be late again. Just imagine traveling through the beautiful city of chicago lounging on our fine leather benches in pure comfort. Our trains are the cleanest in the world and have been rated five stars for comfortability, ease of access, and timeliness. You will find that riding with Metra Rails has many benefits to it, you can find more of those benefits <a href="http://metrarail.com/content/metra/en/home/utility_landing/riding_metra/riding_metra.html">here.</a>
</p>

<hr>

<div id="inbounds">
<h3>Milwaukee District / North Line (Mayfair to Chicago)</h3><br>
    <table id="inbound" cellpadding="0" cellspacing="0">
    <caption>Inbound Schedule: Sunday</caption>
    <tbody>

    <tr>
    <th class="stop">Train #</th>
    <th>2600</th>
    <th>2602</th>
    <th>2604</th>
    <th>2606</th>
    <th>2608</th>
    <th>2612</th>
    <th>2614</th>
    <th>2616</th>
    <th>2620</th>
    <th>2622</th>
    </tr>

    <tr>
    <th class="stop">AM/PM</th>
    <td>AM</td>
    <td>AM</td>
    <td>AM</td>
    <td>AM</td>
    <td>AM</td>
    <td>PM</td>
    <td>PM</td>
    <td>PM</td>
    <td>PM</td>
    <td>PM</td>
    </tr>

    <tr>
    <th class="stop">Mayfair</th>
    <td>06:47</td>
    <td>07:57</td>
    <td>09:57</td>
    <td>&ndash;</td>
    <td>11:57</td>
    <td>01:57</td>
    <td>03:57</td>
    <td>05:57</td>
    <td>09:34</td>
    <td>11:34</td>
    </tr>

    <tr>
    <th class="stop">Grayland</th>
    <td>06:49</td>
    <td>07:59</td>
    <td>09:59</td>
    <td>10:50 c</td>
    <td>11:59</td>
    <td>01:59</td>
    <td>03:59</td>
    <td>05:59</td>
    <td>09:36</td>
    <td>11:36</td>
    </tr>

    <tr>
    <th class="stop">Healy</th>
    <td>06:52</td>
    <td>08:02</td>
    <td>10:02</td>
    <td>&ndash;</td>
    <td>12:02</td>
    <td>02:02</td>
    <td>04:02</td>
    <td>06:02</td>
    <td>09:39</td>
    <td>11:39</td>
    </tr>

    <tr>
    <th class="stop">Western Avenue</th>
    <td>06:57</td>
    <td>08:08</td>
    <td>10:08</td>
    <td>&ndash;</td>
    <td>12:08</td>
    <td>02:08</td>
    <td>04:08</td>
    <td>06:08</td>
    <td>09:43</td>
    <td>11:43</td>
    </tr>

    <tr>
    <th class="stop">Union Station</th>
    <td>07:12</td>
    <td>08:22</td>
    <td>10:22</td>
    <td>11:10</td>
    <td>12:22</td>
    <td>02:22</td>
    <td>04:22</td>
    <td>06:22</td>
    <td>09:58</td>
    <td>11:58</td>
    </tr>

    </tbody>
</table>
    </div>

<hr>

<div id="outbounds">
<h3>Milwaukee District / North Line (Chicago to Mayfair)</h3><br>
    <table id="outbound" cellpadding="0" cellspacing="0">
    <caption>Outbound Schedule: Sunday</caption>
    <tbody>

    <tr>
    <th class="stop">Train #</th>
    <th>2601</th>
    <th>2605</th>
    <th>2607</th>
    <th>2611</th>
    <th>2615</th>
    <th>2619</th>
    <th>2621</th>
    <th>2623</th>
    <th>2625</th>
    <th>2627</th>
    </tr>

    <tr>
    <th class="stop">AM/PM</th>
    <td>AM</td>
    <td>AM</td>
    <td>PM</td>
    <td>PM</td>
    <td>PM</td>
    <td>PM</td>
    <td>PM</td>
    <td>PM</td>
    <td>PM</td>
    <td>AM</td>
    </tr>

    <tr>
    <th class="stop">Union Station</th>
    <td>08:35</td>
    <td>10:35</td>
    <td>12:35</td>
    <td>02:35</td>
    <td>04:35</td>
    <td>05:35</td>
    <td>06:35</td>
    <td>08:35</td>
    <td>10:35</td>
    <td>12:25</td>
    </tr>

    <tr>
    <th class="stop">Western Avenue</th>
    <td>08:44</td>
    <td>10:44</td>
    <td>12:44</td>
    <td>02:44 c</td>
    <td>04:44</td>
    <td>&ndash;</td>
    <td>06:44</td>
    <td>08:44</td>
    <td>10:44</td>
    <td>12:34</td>
    </tr>

    <tr>
    <th class="stop">Healy</th>
    <td>08:49</td>
    <td>10:49</td>
    <td>12:49</td>
    <td>02:49 c</td>
    <td>04:49</td>
    <td>&ndash;</td>
    <td>06:49</td>
    <td>08:49</td>
    <td>10:49</td>
    <td>12:39</td>
    </tr>

    <tr>
    <th class="stop">Grayland</th>
    <td>08:52</td>
    <td>10:52</td>
    <td>12:52</td>
    <td>02:52</td>
    <td>04:52</td>
    <td>05:48 c</td>
    <td>06:52</td>
    <td>08:52</td>
    <td>10:52</td>
    <td>12:42</td>
    </tr>

    <tr>
    <th class="stop">Mayfair</th>
    <td>08:54</td>
    <td>10:54</td>
    <td>12:54</td>
    <td>02:54 c</td>
    <td>04:54</td>
    <td>&ndash;</td>
    <td>06:54</td>
    <td>08:54</td>
    <td>10:54</td>
    <td>12:44</td>
    </tr>

    </tbody>
</table>
    </div>


<div class="other">
  <h2>To see schedules for other days click <a href="http://metrarail.com/metra/en/home/maps_schedules/metra_system_map/md-n/schedule.full.html">here.</a></h2></div>
</div>

</body>
</html>

这是我的css

@charset "utf-8";
/* CSS Document */

body {
    background:url(img/background_texture.jpg) no-repeat center center fixed; 
  background-size: cover;
  color: white;
}

h1, h2, h3 {
    font-family:Helvetica, Arial, Tahoma, Geneva, sans-serif
}

h1 {
    margin: 0px;
}

#header {
    width: 1020px;
    padding: 0px;
    margin: 0 auto;
}

#header img {
    vertical-align: bottom;
}

#content {
    background-image:url(img/ContentBox.png);
    background-repeat: no-repeat;
    background-position:center;
    padding: 0;
    width: 1020px;
    margin: 0 auto;
}

table, td, th {
    border: 1px solid white;
    border-collapse: collapse;
    padding: 4px;
    text-align: center;
    font-family:Arial, Helvetica, sans-serif;
}

th {
    font-size: 1.25em;
    font-weight: bolder;
}

td {
    font-weight: bold;
}

caption {
    font-size: 1.5em;
    font-weight: bold;
}


.stop {
    text-align: right;
}

a:link {
    color: #d39a11;
}

a:visited {
    color:#7E6201;
}

a:hover {
    color:#FB992D
}

a:active {
    color: d39a11;
}

#inbounds, #outbounds {
    text-align: center;
    width: 100%;
}

#inbound, #outbound {
    margin: auto;
}

.other {
    text-align: center;
}

#inbounds h3, #outbounds h3 {
    font-size: 1.5em;
    margin: 0;
}

p {
    font-size: 1.15em;
    padding-right: 5px;
}

.paddedleft {
    padding-left: 5px;
}

hr { display: block;
    height: 2px;
    border: 0;
    border-top: 1px solid #0054a4;
    margin: 1em 0;
    padding: 0; 
}

td:nth-child(odd) {
    background-color: #363c40;
}

td:nth-child(even) {
    background-color:#d39a11;
}


tr:hover > td:nth-child(odd), td:nth-child(even) {
    background-color:#1A1C1E;
}

【问题讨论】：

作为发布的建议，请将代码放在 jsfiddle.net 上。它使每个人都可以更轻松地测试您的代码。我在这里为你做了一个：jsfiddle.net/FfjET/2
感谢您的提示。从现在开始我会这样做，这似乎会让事情变得容易得多。 :)

标签： html css html-table css-selectors styling

【解决方案1】：

你的css代码：

tr:hover > td:nth-child(odd), td:nth-child(even)

当您在 css 声明中添加一个逗号时，它会在同一行添加一个新声明。这个 css 代码说 tr:hover > td:nth-child(odd) 应该有背景颜色，以及每个 td:nth-child(even)。

把代码改成这样：

tr:hover > td:nth-child(odd), tr:hover > td:nth-child(even)

【讨论】：

谢谢，这很有效，帮助我理解了如何编写特定的代码。我没有选择最佳答案只是因为上面的解决方案是一个更好的代码，但你确实帮助我理解了它。再次感谢。

【解决方案2】：

问题是你的最后一行。它说，

在tr 悬停odd td 上执行此操作background-color。
此外，对 td 执行相同操作 -> 此规则涉及没有悬停，它出现在您之前的偶数规则之后，因此 覆盖它

逗号分隔两条规则，您需要将tr:hover > 添加到td:nth-child(even)

但由于我们同时讨论odd AND even td，所以将它们分开是没有意义的

tr:hover td {
    background-color:#1A1C1E;
}

应该没问题

Here's a jsfiddle 你的问题（为了清楚起见，我将悬停背景颜色更改为绿色）

【讨论】：

谢谢。这就像一个魅力。非常感谢您的帮助。
别担心，DiscipleDavid，愿 CSS 与你年轻的学徒同在