Question

我在表格中有几个<th>标签，我想改变它们的颜色，除非是第一个。我尝试了css :not选择器，但是当把substring selector放在里面时它没有用。它仅在我直接放置元素的id时才有效。但是，我想让它更具动态性（例如，不需要每次都更改id）。我该怎么做？

//This is not working
th[id*="header"]:not(th[id*="header0"])

//This is working
th[id*="header"]:not(#header0)

＆＃13;

/*
th[id*="header"]:not(th[id*="header0"]) {
  color: red;
}
*/

th[id*="header"]:not(#header0) {
  color: red;
}

＆＃13;

<table>
  <tr>
    <th id="header0">Header0</th>
    <th id="header1">Header2</th>
    <th id="header2">Header3</th>
    <th id="header3">Header4</th>
    <th id="header4">Header5</th>
    <th id="header5">Header6</th>
  </tr>
</table>

＆＃13;

Answer 1

为什么不使用如下的简单方法而不是尝试各种方法？

th{
  color: red;
}
th:first-child{
  color: black;
}

哪个比使用这样的更兼容：

th:not(:first-child) {
   color: red;
}

回答你的问题：

//This is not working
th[id*="header"]:not(th[id*="header0"])

因为th[id*="header"]选择了ID在任何地方都有标题字符串的所有元素，并且使用非选择器意味着使用:not(th[id*="header0"])将选择th[id*="header"]的子元素，而不是{\ n}}有 th 。甚至:not选择器也不适合复杂的选择器。请参阅此reference以查看简单选择器。

//This is working
th[id*="header"]:not(#header0)

这是有效的，因为它表示您没有选择同一标题的#header0元素th[id*="header"]

Answer 2

我怀疑你正在寻找类似这样的东西

＆＃13;

th[id^="header"]:not([id$="0"]) {
  color: red;
}

＆＃13;

<table>
  <tr>
    <th id="header0">Header0</th>
    <th id="header1">Header2</th>
    <th id="header2">Header3</th>
    <th id="header3">Header4</th>
    <th id="header4">Header5</th>
    <th id="header5">Header6</th>
  </tr>
</table>

＆＃13;

th[id^="header"]:not([id$="0"])的读数为：

任何ID从＆＃34开始的元素;标题＆＃34;但不是以＆＃34; 0＆＃34;。

结尾

Answer 3

您可以使用不带

的第一个子选择器

th:not(:first-child) {
    color: red;
}

CSS不选择不使用子串选择器

3 个答案: