下面是我提到的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>
答案 0 :(得分:1)
在HTML中,您可以添加未在页面上呈现的data attributes,但可以由Javascript或CSS使用。
如果您使用CSS attribute selector,那么您可以根据这些Method Request URI
POST https://media.windows.net/api/Channels(‘*channelid*’)/Stop
属性来定位和设置所需的节点。
一个例子:
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>
结合使用,以实现您想要的结果。
如果你有几个相互矛盾的规则,你可以通过在它后附加'!important`来使一个更重要:
nth-child