rai*_*106 -1 html css css-selectors
根据相邻兄弟选择器的定义,以下代码应该有效.但事实并非如此.我似乎没有发现任何错误.
<!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>
H4并不是紧接着之前的#p2.您应该使用更宽松的兄弟选择器~(通用兄弟组合器):
#p2 ~ h4
E + F紧接在E元素之前 的F 元素E ~ F 一个前面有E元素的F元素但正如许多其他人在评论中提出的那样(在答案中无效),您的HTML无效.您不能只嵌套不应嵌套的元素.浏览器将重新格式化它符合规范.段落元素只能包含短语内容.
属于措辞类元素
<abbr>,<audio>,<b>,<bdo>,<br>,<button>,<canvas>,<cite>,<code>,<command>,<datalist>,<dfn>,<em>,<embed>,<i>,<iframe>,<img>,<input>,<kbd>,<keygen>,<label>,<mark>,<math>,<meter>,<noscript>,<object>,<output>,<progress>,<q>,<ruby>,<samp>,<script>,<select>,<small>,<span>,<strong>,<sub>,<sup>,<svg>,<textarea>,<time>,<var>,<video>,<wbr>和纯文本(不仅包括空格字符).其他一些元素属于此类别,但仅在满足特定条件时:
<a>,如果它只包含措辞内容<area>,如果它是元素的后代<del>,如果它只包含措辞内容<ins>,如果它只包含措辞内容<link>,如果存在itemprop属性<map>,如果它只包含措辞内容<meta>,如果存在itemprop属性
根据浏览器重新格式化的HTML,两个标题都会变成彩色,因为它们都成为#p2段落的兄弟,并且都在同一段落之前.