HTML具体字符串的偶数数异常

问题描述：

以下是我提到的html代码，即使数字行格式不同。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属性'使用'tr [data-type =“QA”] {color：＃f2f2f2; }' – Simon

请详细说明更多信息。我是HTML – kitty

的新手，您的html有误。一个'td'不能是'table'的直接子节点，而'tr'不能是'tr'的直接子节点。它需要'table - > tr - > td/th' –

答

在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相结合，acheive你想要的结果。

如果你有一些抵触的规则，你可以通过附加“一个更重要的important`后：

tr[data-type="QA"] { color: #ff0000 !important; }

中进行更正由于某些原因，我不能使用示例中显示的表格，这个红色我用在没有表格但没有工作的代码中。我刚刚添加了tr：nth-child（偶数）{background-color：＃f2f2f2} tr [data：type =“QA”] {color：＃ff0000！important; }在上面的代码不工作 – kitty

我的坏，我在CSS中有一个错字，这是'数据类型'（带“ - ”不是“：”） – Simon

我加了这个，

QACheck：vNIC 但未加工并且在主程序中tr [data-type =”QA“] {color：＃ff0000！important; } – kitty

HTML具体字符串的偶数数异常

相关推荐