Question

当你有一个随机的HTML页面。我真的无论内容是什么或结构

我想要的是选择除页面上存在的每个表的第一行（TR）之外的所有元素。

以下选择器不起作用：

this.$watch(
        () => {
            return this.$refs.<name>.<data>
        },
      (val) => {
        alert('$watch $refs.<name>.<data>: ' + val)
      }
    )

呈现的表只是一个普通的表，没有任何表头，如：

* :not(tr:first-child){ /* DO SOMETHING */}

Answer 1

这个解决方法怎么样：

* {
  color: green;
}
table tr:first-of-type td {
  color: red;
}

<p>test</p>
<ul>
  <li>item</li>
  <li>item</li>
</ul>
<table>
  <tr>
    <td>cell</td>
    <td>cell</td>
  </tr>
  <tr>
    <td>cell</td>
    <td>cell</td>
  </tr>
  <tr>
    <td>cell</td>
    <td>cell</td>
  </tr>
</table>
<p>test</p>
<ul>
  <li>item</li>
  <li>item</li>
</ul>
<table>
  <tr>
    <td>cell</td>
    <td>cell</td>
  </tr>
  <tr>
    <td>cell</td>
    <td>cell</td>
  </tr>
  <tr>
    <td>cell</td>
    <td>cell</td>
  </tr>
</table>

Answer 2

您可能想要对表格内容进行样式化，而不是“标题”。

一种简单的方法是使用td作为内容，使用th作为标题，因为th用于定义HTML表格中的标题单元格。（你甚至可以记住它说 = t 能 h eader。）

然后，您只需要定位td s：

table {
  border-collapse: collapse;
}

/* Add your style here */
td {
  border: 1px solid gray;
  padding: 8px 20px;
  background: #ddd;
}

<p>123</p>
<table>
  <tr>
    <th>1</th><th>2</th><th>3</th><!-- Note the ths here! -->
  </tr>
  <tr>
    <td>a</td><td>b</td><td>c</td>
  </tr>
  <tr>
    <td>d</td><td>f</td><td>g</td>
  </tr>
</table>
<div>bla bla</div>

⋅ ⋅ ⋅

如果你不能使用th s ...
由于您可能已在td上应用了某些样式，因此最好使用此类选择器来匹配td中除{1}之外的tr：< / p>

table {
  border-collapse: collapse;
}

td {
  border: 1px solid gray;
  padding: 8px 20px;
}

/* Stylize all tds in trs except in the first one! */
table tr:not(:first-child) td {
  background: #ddd;
}

<p>123</p>
<table><!-- All the elements are tds in the trs! -->
  <tr>
    <td>1</td><td>2</td><td>3</td>
  </tr>
  <tr>
    <td>a</td><td>b</td><td>c</td>
  </tr>
  <tr>
    <td>d</td><td>f</td><td>g</td>
  </tr>
</table>
<div>bla bla</div>

希望它有所帮助。

CSS选择除每个表的第一行之外的所有HTML元素

2 个答案: