Question

<div>
    <!-- h1 with a span -->
    <h1> 
        <span>...</span> 
    </h1>
    <table>
        ...

    <!-- h1 without a span -->
    <h1>...</h1>
    <table>
        ...

如何选择围绕<h1>的{{1}}后面的表格？我尝试了<span>，以便该表使用相邻的运算符。但是，它不起作用。这可能是因为表格显示为与h1 span + table相邻而不是<span>。任何提示？

Answer 1

由于您对JavaScript解决方案持开放态度，这就是我所做的。

＆＃13;

var elms = document.getElementsByTagName('h1');

for(var i = 0; i < elms.length; i++) {
  var elm = elms[i];
  
  if(!(elm.getElementsByTagName('span').length > 0))
    elm.className = "select-next-table";
}

＆＃13;

.select-next-table + table {
  border: 1px solid red;
}

table {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}

＆＃13;

<h1><span>Don't select the next table</span></h1>
<table></table>

<h1>Select the next table</h1>
<table></table>

＆＃13;

这里做的是获取所有h1标记并循环它们。稍后，我尝试在span代码中搜索h1，如果我没有获得任何内容，那么我会将class附加到h1元素，之后，我使用.select-next-table + table选择与h1标记相邻的表格，h1没有span个标记。

您绝对可以选择在h1使用

之后呈现的表格

h1 + table

但您无法检查h1是否包含span元素，因为一旦进入h1标记，就无法再次选择父级。因此，对于这些事情，您可能必须使用JavaScript。

Answer 2

您的代码正在检查一个表，该表是h1中span元素之后的第一个兄弟。我不认为你可以根据跨度选择一个表。

但是你可以在h1中添加一个类来做 h1.class + table或者也许使用nth-child选择器h1:nth-child(1) + table。

Answer 3

h1 span + table选择在<span>元素中<h1>之后立即放置的表格。但是您想要选择放在<h1>之后的表格，因此您需要使用h1 + table选择器。仅当<h1>包含<span>标记时，:has()伪类才可以帮助您应用规则：

h1:has(span) + table

问题是任何浏览器仍然不支持选择器级别4。但是可以通过jQuery为指定的表设置特殊的class属性值。

＆＃13;

$("h1:has(span)+table").addClass("special");

＆＃13;

.special {
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>
  <span>H1 with &lt;span&gt;</span>
</h1>
<table>
  <tr><td>special style</td></tr>
</table>
<h1>H1 without &lt;span&gt;</h1>
<table>
  <tr><td>common style</td></tr>
</table>

＆＃13;

如何在这个CSS案例中选择相邻的表格？

3 个答案: