Question

如何覆盖具有！important属性的内联css。我也试过以下链接How to override !important? 但这没有帮助。

<head>
ul{
color:yellow !important;//from here i want to overrride the inline css**
}
</head>

<body>
<div id="something">
 <table>
  <tr>
   <td>
     <ul>
       <li style="color:#fff !important"></li> // i want to oveeride this inline css
     </ul>
   </td>
  </tr>
 </table>
</div>
</body>

Answer 1

在不改变特异性的特异性（即减少匹配元素的范围）的情况下添加特异性强度的最简单方法是将:nth-child( n )添加到选择器。

ul:nth-child( n ) {
  color: yellow !important;
}

<ul style="color: red !important">
  <li>
    Am I red?
  </li>
</ul>

:nth-child( n )特别有用的原因是它永远不会取消选择器的资格，因为所有元素都匹配:nth-child( n )。它也可以无限堆叠：

:nth-child( n ):nth-child( n ):nth-child( n ){
  color: red;
}

:nth-child( n ):nth-child( n ){
  color: blue;
}

:nth-child( n ){
  color: yellow;
}

nth-child will stack any number of times!

如何覆盖具有！important声明的内联css

1 个答案: