如何用jQuery移除已应用的nth-of-type伪类选择器解决样式覆盖

现有如下CSS代码：

.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #595049;
}
.simple {
    background-color: #3535f866;
}

页面完成渲染后，通过获取JSON数据创建表格，并为每一行调用以下函数：

var cbCreatedRow = function( row, data, dataIndex){
    if (data.hasOwnProperty('x') && !data.x) {
        $(row).addClass('simple');
    }
};

目前遇到的问题是：nth-of-type(odd)选择器的样式覆盖了.simple类的样式，不想使用!important这种不规范的写法，询问是否可以通过jQuery移除该伪类选择器的生效样式？

首先明确：无法通过jQuery直接移除伪类选择器的样式——伪类是CSS层面的选择逻辑，不属于元素的可操作属性/类，没办法用jQuery直接控制它的生效状态。不过可以通过以下几种规范方式解决样式优先级冲突：

• 提升.simple选择器的优先级
  把.simple的选择器修改得更具体，让它的优先级与原条纹样式持平或更高，比如结合表格的层级：

  .table-striped>tbody>tr.simple {
      background-color: #3535f866;
  }
  

  这个选择器和原.table-striped>tbody>tr:nth-of-type(odd)的权重相同，只要把这条规则放在原条纹样式规则的后面，就能覆盖原有样式。

• 修改原条纹样式的规则，排除指定行
  给不需要条纹样式的行额外添加一个排除类，比如.no-stripe，然后调整原CSS规则：

  .table-striped>tbody>tr:nth-of-type(odd):not(.no-stripe) {
      background-color: #595049;
  }
  

  同时修改JS函数，给目标行同时添加两个类：

  var cbCreatedRow = function( row, data, dataIndex){
      if (data.hasOwnProperty('x') && !data.x) {
          $(row).addClass('simple no-stripe');
      }
  };
  

  这样原条纹样式就不会作用在带.no-stripe的行上，自然不会和.simple的样式冲突。

内容的提问来源于stack exchange，提问作者Olivier Pons