更改前3行的表格单元格突出显示

时间：2017-02-23 10:08:26

标签： css css-tables

我的这个表有行突出显示 - 它突出显示不同颜色的行（前三个在黑暗中，后面是蓝色）。我想知道如果我还可以将表格单元格突出显示为前三行的黄色，并保持现在的其余部分？ 这是风格：

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

2 个答案:

答案 0 :(得分：1)

当然可以。

从CSS中删除!important并添加：

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

答案 1 :(得分：0)

body {
    background-color: #0D0D0D;
}

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


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

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


a {
	color:#BFBFBF !important;	
}

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
	{mso-displayed-decimal-separator:"\.";
	mso-displayed-thousand-separator:"\,";}
.xl1521017
	{padding-top:1px;
	padding-right:1px;
	padding-left:1px;
	mso-ignore:padding;
	color:black;
	font-size:11.0pt;
	font-weight:400;
	font-style:normal;
	text-decoration:none;
	font-family:Calibri, sans-serif;
	mso-font-charset:0;
	mso-number-format:General;
	text-align:general;
	vertical-align:bottom;
	mso-background-source:auto;
	mso-pattern:auto;
	white-space:nowrap;}
.xl6421017
	{padding-top:1px;
	padding-right:1px;
	padding-left:1px;
	mso-ignore:padding;
	color:white;
	font-size:11.0pt;
	font-weight:400;
	font-style:normal;
	text-decoration:none;
	font-family:Calibri, sans-serif;
	mso-font-charset:0;
	mso-number-format:General;
	text-align:general;
	vertical-align:bottom;
	border:.5pt solid windowtext;
	background:#0D0D0D;
	mso-pattern:black none;
	white-space:nowrap;}
.xl6521017
	{padding-top:1px;
	padding-right:1px;
	padding-left:1px;
	mso-ignore:padding;
	color:white;
	font-size:11.0pt;
	font-weight:400;
	font-style:normal;
	text-decoration:none;
	font-family:Calibri, sans-serif;
	mso-font-charset:0;
	mso-number-format:General;
	text-align:general;
	vertical-align:bottom;
	border:.5pt solid windowtext;
	background:#595959;
	mso-pattern:black none;
	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>

相关问题
最新问题