Question

下面是我提到的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>

Answer 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

HTML甚至特定字符串的数字异常

1 个答案: