最初の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; 
}

：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>

を更新しました

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

出典

2017-02-23 10:22:38

あなたの親切な助けをありがとう！） – daverichards

行のハイライトは、アクティブな行のすべての白い境界線に変更することができると思いますか？ – daverichards

最初の3行の表のセルのハイライトを変更します。

答えて

関連する問題