0
將我的問題重構爲基本答案。在懸停的CSS中識別第一個孩子td和tr identical-child-td
讓我們避免的jQuery（如果可能，我可以用jQuery做到這一點，我只是不想慢的計算機渲染時間）
（這不是問題很重要，但爲了便於參考）
所以，小樣HTML：
<table id="prices">
<tr>
<td class="clear"></td>
</tr>
<tr class="head">
<td class="clear"></td>
<td class="head">
<a href="desktop.html"><h3>Desktop</h3></a>
</td>
<td class="head">
<a href="laptop.html"><h3>Laptop</h3></a>
</td>
<td class="head">
<a href="server.html"><h3>Server</h3></a>
</td>
</tr>
<tr class="price">
<td class="clear"></td>
<td class="price">
<div>
<div class="price_figure">
<a href="contact.html"><span class="price_number">$30</span></a>
<span class="price_tenure">per hour</span>
</div>
</div>
</td>
<td class="price">
<div class="price">
<div class="price_figure">
<a href="contact.html"><span class="price_number">$30</span></a>
<span class="price_tenure">per hour</span>
</div>
</div>
</td>
<td class="price">
<div class="price">
<div class="price_figure">
<a href="contact.html"><span class="price_number">$30</span></a>
<span class="price_tenure">per hour</span>
</div>
</div>
</td>
</tr>
<tr>
<td class="category">
<a href="services_hwrep.html">Hardware Repair</a>
</td>
<td>
<a href="services_hwrep.html"><img src="../css/images/check.png" /></a>
</td>
<td>
<a href="services_hwrep.html"><img src="../css/images/check.png" /></a>
</td>
<td>
<a href="services_hwrep.html"><img src="../css/images/check.png" /></a>
</td>
</tr>
<tr>
<td class="category">
<a href="services_netts.html">Network Troubleshooting</a>
</td>
<td>
<a href="services_hwrep.html"><img src="../css/images/check.png" /></a>
</td>
<td>
<a href="services_hwrep.html"><img src="../css/images/check.png" /></a>
</td>
<td>
<a href="services_hwrep.html"><img src="../css/images/check.png" /></a>
</td>
</tr>
<tr class="foot">
<td div class="clear"></td>
<td class="foot">
<div class="footer">
<a href="contact.html" class="action_button">Contact Us</a>
</div>
</td>
<td class="foot">
<div class="footer">
<a href="contact.html" class="action_button">Contact Us</a>
</div>
</td>
<td class="foot">
<div class="footer">
<a href="contact.html" class="action_button">Contact Us</a>
</div>
</td>
</tr>
</table>
，目前CSS：
table#prices {
background: #131313;
color: #efefef;
}
table#prices a {
color: #999;
font-size:16px;
}
table#prices td {
border:1px solid #131313;
}
table#prices td:hover a {
color: #FFF;
font-size:16px;
}
table#prices a:hover {
color: #69c;
}
table#prices h3 {
text-align:center;
padding-bottom:10px;
}
table#prices img {
margin:0 auto;
display:block;
}
table#prices td {
text-align:center;
padding-bottom:0px;
width:210px;
}
table#prices td:first-child {
background: #222;
padding-top:15px;
text-align:center;
}
table#prices td.category:hover {
background: linear-gradient(#147, #369);
padding-top:15px;
text-align:center;
margin:1px;
}
table#prices tr.price td {
background: #222;
padding:15px 10px;
text-align:center;
border:1px solid #131313;
}
table#prices td.price:hover {
background: linear-gradient(#147, #369);
}
table#prices .price_number {
font-size:26px;
font-weight: bold;
display: block;
}
table#prices .price_tenure {
font-size: 11px;
}
table#prices td:first-child {
background: #222;
color: #efefef;
padding:15px;
margin-right:0;
border:1px solid #131313;
}
table#prices tr:last-child td:hover {
background: #131313;
border:none;
}
.action_button {
text-decoration: none;
color:#efefef;
font-weight: bold;
border-radius: 3px;
background: linear-gradient(#147, #369);
margin:5px 20px;
font-size: 11px;
padding:5px 20px;
text-transform: uppercase;
}
.action_button:hover {
background: linear-gradient(#369, #147);
border:1px solid #000;
padding-bottom:-1px;
color:#333;
}
tr:hover td {
background:#333;
}
tr td:hover {
background:#666;
}
td.head:hover {
background:#131313;
}
td.foot:hover td {
background:#131313;
}
tr.head:hover td {
background:#131313;
}
tr.foot:hover td {
background:#131313;
}
tr:hover td:first-child {
background: linear-gradient(#147, #369);
}
.pri_active {
background-color:#fff;
}
.pri_cat {
background:linear-gradient(#369, #69c);
}
簡單的問題... 如果您發現活頁：
http://www.sinsysonline.com/cameron/nick/repair/price.html
我怎麼能有左柱和頂部價格欄通過CSS突出？ （在激活複選標記td上）。如果您將鼠標懸停在左側或頂部，則會以漸變方式突出顯示。是否有一種CSS方式來回溯（td：hover，父tr td：第一個孩子）來完成這項工作？
任何幫助表示讚賞！
「（我可以做它與jQuery，我只是不想慢計算機渲染時間）「這是什麼，1996？ – BoltClock
如果你看看這裏： http://www.sinsysonline.com/repair/contact.html 你會注意到我沒有jQuery的問題。我將在價格數組中有超過6000個項目，我不想在後臺進行百萬計算。 –