仅当一个类未与另一个类组合时才使用CSS样式

时间:2016-07-28 13:58:21

标签: css css-selectors

只有当某个类没有与另一个类合并时,我才需要以某种方式设置td样式。

我正在做这样的事情:

tr.transferred td[class^="sorting_"],
tr.transferred td[class*=" sorting_"] {
    background-color: rgba(153, 204, 255, 0) !important;
}

尽管我讨厌使用!important我需要它们,所以请稍微承担我的代码。

我需要更新我的选择器,以便仅当td的{​​{1}}类没有与sorting_*类合并时才会应用该样式。

如果您需要更多信息,请与我们联系。

编辑: (其他信息)

这是一个Fiddle,所以你可以尝试看看我的问题是什么。

HTML

g-*

Jquery的

<table class="display cell-border nowrap" cellspacing="0">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Description</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Doe</td>
      <td>Police Officer</td>
      <td class="g-green">Active</td>
    </tr>
    <tr class="transferred">
      <td>2</td>
      <td>Jane Smith</td>
      <td>Accountant</td>
      <td class="g-green">Active</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Nicole Curtis</td>
      <td>Manager</td>
      <td class="g-red">Retired</td>
    </tr>
  </tbody>
</table>

CSS

$(document).ready(function() {
  $("table").DataTable({
    "paging": false,
    "bPaginate": false,
    "bFilter": false,
    "bInfo": false
  });
});

我的问题是什么

因此,如果您查看我的fiddle并进行排序,除非按tr.transferred { background-color: rgba(153, 204, 255, 0.30) !important; } tr.transferred td[class^="sorting_"], tr.transferred td[class*=" sorting_"] { background-color: rgba(153, 204, 255, 0) !important; } .g-yellow { background-color: rgba(226, 222, 112, 0.6) !important; } .g-green { background-color: rgba(112, 226, 112, 0.6) !important; } .g-pink { background-color: rgba(226, 112, 196, 0.6) !important; } .g-red { background-color: rgba(226, 112, 112, 0.6) !important; } .g-blue { background-color: rgba(112, 163, 226, 0.6) !important; } 列排序,否则颜色效果很好。它应该保留它的绿色分类与否。

1 个答案:

答案 0 :(得分:1)

nlapiScheduleScript(scriptId, deployId, params); 选择器就像这样。

:not()

    [class*="sorting_"]:not([class*="g-"]) {
      /* your styles here */
    }
.sorting_ {
  width: 75px;
  height: 75px;
  border: 1px solid grey;
  display: inline-block;
  margin: 1em;
}
[class*="sorting_"]:not([class*="g-"]) {
  background: red;
}
.g-green {
  background: green;
}
.g-pink {
  background: pink;
}
.g-blue {
  background: blue;
}

适用于Chrome / FF / IE11