下面是我提到偶数行格式不同的 html 代码。
但是如果字符串“QACheck:”在行中。我需要使用奇数行格式 即使它出现在偶数行中。请帮忙
对于偶数行，我使用如下:
tr:nth-child(even){background-color: #f2f2f2}
下面是代码。
<!DOCTYPE html>
<html>
<style>
p {
font-family : Calibri;
font-size: 14px;
font-weight: bolder;
text-align : left;
}
p.fade {
color : #CCCCCC;
font-size: 14px;
}
em {
font-style : italic ;
font-size : 16px;
font-weight: lighter ;
}
em.pass {
font-style : italic ;
font-size : 16px;
color: green ;
}
em.fail {
font-style : italic ;
font-size : 16px;
color: red ;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
hr {
align: left ;
margin-left: 0px ;
width: 500px;
height:1px;
}
table {
border-collapse: collapse;
}
tr {
padding: 4px;
text-align: center;
border-right:2px solid #FFFFFF;
}
tr:nth-child(even){background-color: #f2f2f2}
th {
background-color: #cceeff;
color: black;
padding: 4px;
border-right:2px solid #FFFFFF;
}
</style>
<body>
<table>
<td style='color:Coral'>QACheck: ABC</td>
<tr>
<th>PARA</th>
<th>OT</th>
<th>QA</th>
<th>Reason</th>
</tr>
<tr>
<td>FruitName</td>
<td>Apple</td>
<td>OK</td>
<td></td>
</tr>
<tr>
<td style='color:Coral'>QACheck: XYZ</td>
<tr>
<th>PARA</th>
<th>OT</th>
<th>QA</th>
<th>Reason</th>
</tr>
<tr>
<td>FruitName</td>
<td>Orange</td>
<td>OK</td>
<td></td>
</tr>
<tr>
<td>VegName</td>
<td> drumstick</td>
<td>OK</td>
<td></td>
</tr>
</table>
</body>
</html>最佳答案
在 HTML 中，您可以添加 data attributes不会在页面上呈现，但可以由 Javascript 或 CSS 使用。
如果你使用 CSS attribute selector然后您可以根据这些 data-* 属性定位和设置您想要的节点样式。
一个例子:
tr:nth-child(odd) { background-color: #9999FF; }
tr[data-type="QA"] { color: #ff0000; }<table>
<tr data-type="QA">
<td>this is red</td>
</tr>
</table>这可以与常规通用规则 nth-child 结合使用以实现您想要的结果。
如果您有多个规则相互矛盾，您可以通过在其后附加 ´!important` 使其中一个更重要:
tr[data-type="QA"] { color: #ff0000 !important; }
关于javascript - 特定字符串的 HTML 偶数异常，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44230900/