Question

根据相邻兄弟选择器的定义，以下代码应该有效。但事实并非如此。我似乎没有发现任何错误。

<!DOCTYPE html>
<html>
<head>
<style>

#p2+h4{
    color:red;
}

</style>
</head>

<body>
    <p>
        <p id="p2">This is the sibling of the selected para</p>
        <p>
            <h4>this should not be colored</h4>
        </p>
        <h4>this should be colored</h4>
    </p>    
</body>
</html>

Answer 1

{p> H4 <{1}} 。你应该使用一个更松散的兄弟选择器#p2（一般兄弟组合器）：

~

Specification

#p2 ~ h4 F元素立即前面有E元素

E + F前面有E元素的F元素

重要

但正如许多其他人在评论中建议的那样（在答案中无效），您的HTML无效。你不能只嵌套不应该嵌套的元素。浏览器重新格式化符合the specification。段落元素只能包含短语内容。


属于短语类别的元素包括E ~ F，<abbr>，<audio>，<b>，<bdo>，<br>，<button> ，<canvas>，<cite>，<code>，<command>，<datalist>，<dfn>，<em>，<embed>，{ {1}}，<i>，<iframe>，<img>，<input>，<kbd>，<keygen>，<label>，{{1 }}，<mark>，<math>，<meter>，<noscript>，<object>，<output>，<progress>，<q> ，<ruby>，<samp>，<script>，<select>，<small>，<span>，<strong>，<sub>，{ {1}}，<sup>，<svg>，<textarea>和纯文字（不仅包含空格字符）。

其他一些元素属于此类别，但仅在满足特定条件时才会生效：


<time>，如果它只包含措辞内容

<var>，如果它是元素的后代

<video>，如果它只包含措辞内容

<wbr>，如果它只包含措辞内容

<a>，如果存在itemprop属性

<area>，如果它只包含措辞内容

<del>，如果存在itemprop属性


根据浏览器重新格式化的HTML，两个标题都会变成彩色，因为它们都成为<ins>段的兄弟，并且都在同一段落之前。

Answer 2

您的HTML无效。允许的p元素内容为phrasing content。附加的css邻近兄弟选择器选择遵循以下规则：

相邻的兄弟选择器具有以下语法：E1 + E2，其中 E2是选择器的主题。选择器匹配E1和E2 在文档树中共享同一个父级，E1紧接在之前 E2，忽略非元素节点（如文本节点和注释）。

标识为#p2的示例元素中的

不会立即位于h4之前。你可以修复你的html并使用一般的兄弟选择器：

＆＃13;

#p2 ~ h4 {
  color: red;
}

＆＃13;

<div>
  <p id="p2">This is the sibling of the selected para</p>
  <div>
    <h4>this should not be colored</h4>
  </div>
  <h4>this should be colored</h4>
</div>

＆＃13;

这将起作用，因为一般兄弟选择器根据以下规则选择：

以下兄弟组合器由＆＃34; tilde＆＃34; （U + 007E，〜）分隔两个简单选择器序列的字符。该由两个序列表示的元素共享同一个父元素文档树和第一个序列表示的元素先于（不一定是立即）由...表示的元素第二个。

此处标识为#p2的元素与html中的第二个元素h4共享相同的父级，但不与第一个元素共享。

另请查看Difference between the selectors div + p (plus) and div ~ p (tilde)

<强>参考文献：

Adjacent sibling selectors

Following-sibling combinator

Answer 3

因为p2并非与任何h4

相邻

这样可行

<p>stuff</p>
<h4>stuff</h4>

但这不会

<p>stuff</p>
<anyothertag>
    <h4>stuff</h4>
</anyothertag>

Answer 4

您的HTML无效。 <p>个元素不能包含其他<p>元素，也不能包含标题元素。如果您检查页面中的代码，浏览器会对其进行更正并将其生成为：

<p></p>
<p id="p2">This is the sibling of the selected para</p>
<p></p>
<h4>this should not be colored</h4>
<p></p>
<h4>this should be colored</h4>
<p></p>

这就是为什么你的CSS失败，因为#p2+h4寻找<h4>作为ID为p2的元素的直接兄弟。您可以使用#p2~h4或#p2+p+h4来选择标题。但请注意，#p2~h4也会选择第二个标题。

Answer 5

这不起作用，因为浏览器无论如何都不接受嵌套的p标签。用div替换所有的p标签会使它工作，但是这样做也不是因为你正在寻找id为p2的任何元素，并且紧接着是h4类型的元素。只有当你输入p + h4这样的通用时，你才会解决每个以p元素开头的h4。以下是如何使其全部工作：

<!DOCTYPE html>
<html>
<head>
<style>
#p2 + div + h4{
    color:red;
}
</style>
</head>
<body>
    <div>
        <div id="p2">This is the sibling of the selected para</div>
        <div>
            <h4>this should not be colored</h4>
        </div>
        <h4>this should be colored</h4>
    </div>    
</body>
</html>

为什么相邻的兄弟选择器不起作用？

5 个答案:

Specification

重要