改變第3行的表格單元格高亮

我有這張表格中的行突出顯示 - 突出顯示不同顏色的行（前3個在黑暗中，後來在藍色中）。我想知道如果我還可以將表格單元格突出顯示更改爲前三行中的黃色，並保持原樣？這裏是風格：改變第3行的表格單元格高亮

<style> 
body { 
    background-color: #0D0D0D; 
} 

tr:hover{ 
    background: #0000F7; 
    color: rgb(102,102,102); 
} 


tr:hover td{ 
    background: transparent !important; 
} 

tr td:hover { 
    background-color: #609 !important; 
} 

tr:nth-child(1):hover { 
    background-color: #292C31; 
} 

tr:nth-child(2):hover { 
    background-color: #292C31; 
} 
tr:nth-child(3):hover { 
    background-color: #292C31; 
} 

a { 
    color:#BFBFBF !important; 
} 

a { 
text-decoration:none !important; 
} 


</style>

和文件本身： https://jsfiddle.net/33bxg04e/

來源

2017-02-23 daverichards

您是否認爲您還可以幫助我將紅邊添加到上3行中的亮表格單元中？ – daverichards

當然可以。

從你的CSS刪除!important S和補充一點：

tr td:hover { 
    background-color: #609; 
} 

tr:nth-child(1) td:hover { 
    background-color: yellow; 
} 

tr:nth-child(2) td:hover { 
    background-color: yellow; 
} 
tr:nth-child(3) td:hover { 
    background-color: yellow; 
}

Updated fiddle

來源

2017-02-23 10:13:48 Turnip

非常感謝 - 作品奇妙！） – daverichards

你認爲行突出顯示可以更改爲只是白色邊框四周所有的活動行？ – daverichards

您可以添加到您的CSS：

tr:nth-child(-n+3) td:hover { 
    background-color: yellow !important; 
}

這臺細胞（TD）在前3行（tr）具有黃色背景色。

我還建議簡化您當前的CSS和改變：

tr:nth-child(1):hover { 
    background-color: #292C31; 
} 

tr:nth-child(2):hover { 
    background-color: #292C31; 
} 
tr:nth-child(3):hover { 
    background-color: #292C31; 
}

到：

tr:nth-child(-n+3):hover { 
    background-color: #292C31; 
}

更新JSFiddle- https://jsfiddle.net/33bxg04e/4/

來源

2017-02-23 10:17:32 Shtut

謝謝 - 很高興給您的慷慨幫助！） – daverichards

body { 
 
    background-color: #0D0D0D; 
 
} 
 

 
tr:hover{ 
 
\t background: #292C31; 
 
\t color: rgb(102,102,102); 
 
} 
 

 

 
tr:hover td{ 
 
    background: transparent; 
 
} 
 
tr td:hover { 
 
\t background-color: yellow; 
 
} 
 

 
tr:nth-child(1n + 4):hover { 
 
    background-color: #0000F7; 
 
} 
 
tr:nth-child(1n + 4) td:hover { 
 
    background-color: #609; 
 
} 
 

 

 
a { 
 
\t color:#BFBFBF !important; \t 
 
} 
 

 
a { 
 
text-decoration:none !important; 
 
}

<html xmlns:o="urn:schemas-microsoft-com:office:office" 
 
xmlns:x="urn:schemas-microsoft-com:office:excel" 
 
xmlns="http://www.w3.org/TR/REC-html40"> 
 

 
<head> 
 
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-5"> 
 
<meta name=ProgId content=Excel.Sheet> 
 
<meta name=Generator content="Microsoft Excel 14"> 
 
<link rel=File-List href="Sheet1_filelist.xml"> 
 
<style id 
 
<style id="17540223 12ii44_765_Styles"> 
 
<!--table 
 
\t {mso-displayed-decimal-separator:"\."; 
 
\t mso-displayed-thousand-separator:"\,";} 
 
.xl1521017 
 
\t {padding-top:1px; 
 
\t padding-right:1px; 
 
\t padding-left:1px; 
 
\t mso-ignore:padding; 
 
\t color:black; 
 
\t font-size:11.0pt; 
 
\t font-weight:400; 
 
\t font-style:normal; 
 
\t text-decoration:none; 
 
\t font-family:Calibri, sans-serif; 
 
\t mso-font-charset:0; 
 
\t mso-number-format:General; 
 
\t text-align:general; 
 
\t vertical-align:bottom; 
 
\t mso-background-source:auto; 
 
\t mso-pattern:auto; 
 
\t white-space:nowrap;} 
 
.xl6421017 
 
\t {padding-top:1px; 
 
\t padding-right:1px; 
 
\t padding-left:1px; 
 
\t mso-ignore:padding; 
 
\t color:white; 
 
\t font-size:11.0pt; 
 
\t font-weight:400; 
 
\t font-style:normal; 
 
\t text-decoration:none; 
 
\t font-family:Calibri, sans-serif; 
 
\t mso-font-charset:0; 
 
\t mso-number-format:General; 
 
\t text-align:general; 
 
\t vertical-align:bottom; 
 
\t border:.5pt solid windowtext; 
 
\t background:#0D0D0D; 
 
\t mso-pattern:black none; 
 
\t white-space:nowrap;} 
 
.xl6521017 
 
\t {padding-top:1px; 
 
\t padding-right:1px; 
 
\t padding-left:1px; 
 
\t mso-ignore:padding; 
 
\t color:white; 
 
\t font-size:11.0pt; 
 
\t font-weight:400; 
 
\t font-style:normal; 
 
\t text-decoration:none; 
 
\t font-family:Calibri, sans-serif; 
 
\t mso-font-charset:0; 
 
\t mso-number-format:General; 
 
\t text-align:general; 
 
\t vertical-align:bottom; 
 
\t border:.5pt solid windowtext; 
 
\t background:#595959; 
 
\t mso-pattern:black none; 
 
\t white-space:nowrap;} 
 
--> 
 
</style> 
 
<title>Sheet1</title> 
 
</head> 
 

 
<body> 
 
<!--[if !excel]>&nbsp;&nbsp;<![endif]--> 
 
<!--The following information was generated by Microsoft Excel's Publish as Web 
 
Page wizard.--> 
 
<!--If the same item is republished from Excel, all information between the DIV 
 
tags will be replaced.--> 
 
<!-----------------------------> 
 
<!--START OF OUTPUT FROM EXCEL PUBLISH AS WEB PAGE WIZARD --> 
 
<!-----------------------------> 
 

 
<div id="17540223 12ii44_765" align=center x:publishsource="Excel"> 
 

 
<h1 style='color:black;font-family:Calibri;font-size:14.0pt;font-weight:800; 
 
font-style:normal'>Sheet1</h1> 
 

 
<table border=0 cellpadding=0 cellspacing=0 width=336 style='border-collapse: 
 
collapse;table-layout:fixed;width:336pt'> 
 
<col width=48 span=7 style='width:48pt'> 
 
<tr height=15 style='height:15.0pt'> 
 
    <td height=15 class=xl6421017 width=48 style='height:15.0pt;width:48pt'>A</td> 
 
    <td class=xl6421017 width=48 style='border-left:none;width:48pt'>A</td> 
 
    <td class=xl6421017 width=48 style='border-left:none;width:48pt'>A</td> 
 
    <td class=xl6421017 width=48 style='border-left:none;width:48pt'>A</td> 
 
    <td class=xl6421017 width=48 style='border-left:none;width:48pt'>A</td> 
 
    <td class=xl6421017 width=48 style='border-left:none;width:48pt'>A</td> 
 
    <td class=xl6421017 width=48 style='border-left:none;width:48pt'>A</td> 
 
</tr> 
 
<tr height=15 style='height:15.0pt'> 
 
    <td height=15 class=xl6421017 style='height:15.0pt;border-top:none'>B</td> 
 
    <td class=xl6421017 style='border-top:none;border-left:none'>B</td> 
 
    <td class=xl6421017 style='border-top:none;border-left:none'>B</td> 
 
    <td class=xl6421017 style='border-top:none;border-left:none'>B</td> 
 
    <td class=xl6421017 style='border-top:none;border-left:none'>B</td> 
 
    <td class=xl6421017 style='border-top:none;border-left:none'>B</td> 
 
    <td class=xl6421017 style='border-top:none;border-left:none'>B</td> 
 
</tr> 
 
<tr height=15 style='height:15.0pt'> 
 
    <td height=15 class=xl6421017 style='height:15.0pt;border-top:none'>C</td> 
 
    <td class=xl6421017 style='border-top:none;border-left:none'>C</td> 
 
    <td class=xl6421017 style='border-top:none;border-left:none'>C</td> 
 
    <td class=xl6421017 style='border-top:none;border-left:none'>C</td> 
 
    <td class=xl6421017 style='border-top:none;border-left:none'>C</td> 
 
    <td class=xl6421017 style='border-top:none;border-left:none'>C</td> 
 
    <td class=xl6421017 style='border-top:none;border-left:none'>C</td> 
 
</tr> 
 
<tr height=15 style='height:15.0pt'> 
 
    <td height=15 class=xl6521017 align=right style='height:15.0pt;border-top: 
 
    none'>1</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>2</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>3</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>4</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>5</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>6</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>7</td> 
 
</tr> 
 
<tr height=15 style='height:15.0pt'> 
 
    <td height=15 class=xl6521017 align=right style='height:15.0pt;border-top: 
 
    none'>1</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>2</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>3</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>4</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>5</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>6</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>7</td> 
 
</tr> 
 
<tr height=15 style='height:15.0pt'> 
 
    <td height=15 class=xl6521017 align=right style='height:15.0pt;border-top: 
 
    none'>1</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>2</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>3</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>4</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>5</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>6</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>7</td> 
 
</tr> 
 
<tr height=15 style='height:15.0pt'> 
 
    <td height=15 class=xl6521017 align=right style='height:15.0pt;border-top: 
 
    none'>1</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>2</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>3</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>4</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>5</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>6</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>7</td> 
 
</tr> 
 
<tr height=15 style='height:15.0pt'> 
 
    <td height=15 class=xl6521017 align=right style='height:15.0pt;border-top: 
 
    none'>1</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>2</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>3</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>4</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>5</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>6</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>7</td> 
 
</tr> 
 
<tr height=15 style='height:15.0pt'> 
 
    <td height=15 class=xl6521017 align=right style='height:15.0pt;border-top: 
 
    none'>1</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>2</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>3</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>4</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>5</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>6</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>7</td> 
 
</tr> 
 
<tr height=15 style='height:15.0pt'> 
 
    <td height=15 class=xl6521017 align=right style='height:15.0pt;border-top: 
 
    none'>1</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>2</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>3</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>4</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>5</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>6</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>7</td> 
 
</tr> 
 
<tr height=15 style='height:15.0pt'> 
 
    <td height=15 class=xl6521017 align=right style='height:15.0pt;border-top: 
 
    none'>1</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>2</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>3</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>4</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>5</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>6</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>7</td> 
 
</tr> 
 
<tr height=15 style='height:15.0pt'> 
 
    <td height=15 class=xl6521017 align=right style='height:15.0pt;border-top: 
 
    none'>1</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>2</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>3</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>4</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>5</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>6</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>7</td> 
 
</tr> 
 
<tr height=15 style='height:15.0pt'> 
 
    <td height=15 class=xl6521017 align=right style='height:15.0pt;border-top: 
 
    none'>1</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>2</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>3</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>4</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>5</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>6</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>7</td> 
 
</tr> 
 
<tr height=15 style='height:15.0pt'> 
 
    <td height=15 class=xl6521017 align=right style='height:15.0pt;border-top: 
 
    none'>1</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>2</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>3</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>4</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>5</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>6</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>7</td> 
 
</tr> 
 
<tr height=15 style='height:15.0pt'> 
 
    <td height=15 class=xl6521017 align=right style='height:15.0pt;border-top: 
 
    none'>1</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>2</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>3</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>4</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>5</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>6</td> 
 
    <td class=xl6521017 align=right style='border-top:none;border-left:none'>7</td> 
 
</tr> 
 
<![if supportMisalignedColumns]> 
 
<tr height=0 style='display:none'> 
 
    <td width=48 style='width:48pt'></td> 
 
    <td width=48 style='width:48pt'></td> 
 
    <td width=48 style='width:48pt'></td> 
 
    <td width=48 style='width:48pt'></td> 
 
    <td width=48 style='width:48pt'></td> 
 
    <td width=48 style='width:48pt'></td> 
 
    <td width=48 style='width:48pt'></td> 
 
</tr> 
 
<![endif]> 
 
</table> 
 

 
</div> 
 

 

 
<!-----------------------------> 
 
<!--END OF OUTPUT FROM EXCEL PUBLISH AS WEB PAGE WIZARD--> 
 
<!-----------------------------> 
 
</body> 
 

 
</html>

來源

2017-02-23 10:22:38

感謝您的熱心幫助！） – daverichards

您是否認爲行突出顯示可以更改爲白色邊框四周所有活動行？ – daverichards

改變第3行的表格單元格高亮

回答

相關問題