程序员经验分享-hwhale

为什么相邻同级选择器不起作用？ [关闭]

2024-04-19

根据相邻同级选择器的定义，以下代码应该可以工作。然而事实并非如此。我似乎没有发现任何错误。

<!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 is not 紧接着之前 by the #p2。您应该使用更宽松的同级选择器~（一般兄弟组合器）：

#p2 ~ h4

规格 http://www.w3.org/TR/selectors/#selectors

  • E + FF元素立即地前面有 E 元素
  • E ~ FF 元素前面有 E 元素

重要的

但正如许多其他人在评论中建议的那样（并且在答案中无效），您的 HTML 无效。您不能只嵌套不应该嵌套的元素。浏览器会reformat它符合规格 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content。段落元素只能包含短语内容。

属于短语类别的元素是<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> and 纯文本（不仅由空格字符组成）。

其他一些元素也属于此类别，但前提是满足特定条件：

  • <a>，如果它只包含短语内容
  • <area>，如果它是某个元素的后代
  • <del>，如果它只包含短语内容
  • <ins>，如果它只包含短语内容
  • <link>，如果 itemprop 属性存在
  • <map>，如果它只包含短语内容
  • <meta>，如果 itemprop 属性存在

基于浏览器重新格式化的 HTML，两个标题都会变成彩色，因为它们都成为了同级标题#p2段并且前面都有相同的段落。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

cssselectors

为什么相邻同级选择器不起作用？ [关闭] 的相关文章

  • Chrome 浏览器不显示 HTTP 处理程序生成的图像

    基本上我有一个网站 可以呈现一些文档 主要是办公室 的 HTML 预览 生成的 HTML 片段包含在同一网站返回的页面中 但图像由 HTTP 处理程序从具有以下链接的另一个网站返回 img width 50 height 50 src ht

  • 我正在尝试向我的 vue.js 项目添加背景图像

    我想添加覆盖整个页面的背景图像 然而现在看起来是这样的 我希望它跨越整个网页 在 vue js 中这将如何完成 我还想要一个动画工具栏 以便当页面不滚动时工具栏是透明的并呈现背景图像的外观 当它滚动时 工具栏将具有当前的蓝色 这是我的小提琴

  • 如何将表格中的td高度设置为0px？

    我有一个包含几行的 HTML 表 这是动态构建的 全部 tr 有一个 td inside If one td 里面没有 HTML 内容 我希望它是不可见的 如何才能做到这一点 并不是说里面的 HTML 是动态渲染的 我不想使用display

  • grid-auto-columns 在 Firefox 中不能完全工作

    我不明白为什么 DIV 3 的大小与 DIV 1 DIV 2 的大小不同 https codepen io anon pen vaVqPW https codepen io anon pen vaVqPW grid display grid

  • 如何防止 CFDocument 中的内容中间发生分页？

    我使用 cfdocument 标签从 html css 动态生成 PDF 文件 有些内容块我不想跨越多个页面 经过一番搜索后 我发现根据文档支持 page break inside 样式 然而 在我的测试中 声明 page break in

  • 如何在Eclipse中集成CSS预处理？ [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我想在 Eclipse 中编辑 SCSS 文件 最好使用语法突出显示 scss files 我发现这些资

  • 使用 javascript 更改 div 颜色

    div style height 20px width 100 background color 000000 div br

  • 如何向我的网站添加 Google 搜索框？

    我正在尝试将 Google 搜索框添加到我自己的网站 我希望它搜索谷歌本身 而不是我的网站 我曾经有一些代码可以工作 但现在不再工作

  • 如何删除flexbox中所有换行行的左右边距（没有nth-child或js）

    我正在寻找一种好方法来删除每行中每个第一个和最后一个项目的左右边距 而不使用 nth child 或 JavaScript 如果这是不可能的 那么我想下一个最好的方法是在主弹性盒元素上设置负左 右边距 但我不太确定使用弹性盒来做到这一点的最

  • html 表格单元格的条件格式

    是否有现成的解决方案可以对 HTML 表格进行条件格式设置 通过条件格式 我更感兴趣的是根据该列或其他列 在同一个表中 的值 数字 将不同的颜色作为单元格背景 类似于我们在 Excel 条件格式 gt 色阶 gt 红黄绿中的内容 我想在通过

  • 更快地开发和测试打印样式表的方法（避免每次都进行打印预览）？

    这是我现在的流程 保存对 print css 的更改 打开浏览器并刷新页面 右键单击并选择 打印 gt 打印预览 Firefox 但实际上是任何浏览器 第三步让我烦恼 我想知道是否可以通过插件或其他东西将其从流程中删除 只需选择以打印媒体形

  • iOS 解决方法：在没有 CSS 属性的情况下平滑滚动 滚动行为：平滑？

    编辑 我找到了一个 jQuery 解决方案 https codepen io chriscoyier pen dpBMVP https codepen io chriscoyier pen dpBMVP这个确实可以在 iOS 上运行 我想

  • 如何向 Rails 应用程序添加自定义字体？

    我想在 RoR 应用程序中使用几种字体 但它们的格式主要是 ttf 和 otf 等 我该如何将这些文件嵌入到我的 Rails 应用程序中 也就是说 一旦我将它们放入我的资产文件夹中 将它们嵌入我的 CSS 和 或 LESS 文件中的语法到底

  • Chromium 嵌入式框架支持 HTML5 音频吗？

    我一直在玩 CefSharp 但似乎无法播放任何音频 我可以让音频控件出现 但它们保持冻结状态 这些是我使用的版本 Chromium 21 0 1180 0 CEF r728 CefSharp 0 12 4596 50 我先尝试了 mp3

  • 如何适应特定子元素的宽度？

    problem 我正在尝试创建一个技能表 我无法问下一个问题为什么 所以我创建了一个新帐户并询问 当前状态 我想将元素的宽度与 meter 也就是说 如何设定区块的标准 meter 子元素 在上面的 gif 中 img meter 我想要保

  • Perl：HTTP::微小删除留下损坏的锚标记

    我编写了一个脚本 该脚本收集从数据库读取的缓冲区内的所有 URL 检查该页面是否仍然存在 并使用 HTTP Tiny 从缓冲区中删除 URL 如果该 URL 无法访问或返回无效 问题是 HTTP Tiny 删除左锚标记 例如此处无效的文本

  • 淘汰赛绑定，每个都可进行自定义

    我这里有一个情况 用于淘汰每个带有定制的绑定 这是我的代码 div div table tbody tr td td td td tr tbody table div div

  • 如何强制外部 div 扩展到内部 div 的高度？

    我有 ajax 到的数据 div class content 我希望外部 div 扩展到内部 div 的高度 我不知道该怎么做 HTML div class outer div class inner div class content S

  • 元素和 svg 形状之间的白线

    大家好 我正在使用由 shapedivider 生成的 svg 整形器 您可以看到 有一条白线 我不知道为什么它在那里以及如何删除它 请你帮助我好吗 有形状分隔符的代码 custom shape divider bottom 1640714

  • 如何从 bootstrap-markdown.js 调用 .getContent 和 .parseContent

    我是使用 Bootstrap 插件的新手 刚刚通过代码学院 http www codecademy com en skills make an interactive website 我真的很想用这个很棒的引导 Markdown 插件 ht

随机推荐

热门标签