Html 如何制作CSS+;运算符不忽略元素之间的纯文本?
我发布到的一个流行的在线论坛没有能力在帖子中创建内联代码跨度。因此,我正在Tampermonkey中创建一个用户脚本,以将代码块转换为内联代码范围,除非它们紧跟在换行符之后。到目前为止,我已经制作了一个Tampermonkey脚本,使用以下选择器将样式注入在线论坛的Html 如何制作CSS+;运算符不忽略元素之间的纯文本?,html,css,Html,Css,我发布到的一个流行的在线论坛没有能力在帖子中创建内联代码跨度。因此,我正在Tampermonkey中创建一个用户脚本,以将代码块转换为内联代码范围,除非它们紧跟在换行符之后。到目前为止,我已经制作了一个Tampermonkey脚本,使用以下选择器将样式注入在线论坛的: br+code{ 背景颜色:黄色; } 示例A(这是正确的) 这个文本不是黄色的此代码不是黄色。 但是换行后,代码是黄色的 示例B(不想要的行为) 这个文本不是黄色的此代码不是黄色。 换行后,会有更多的文本。。。 …
:
br+code{
背景颜色:黄色;
}
示例A(这是正确的)
这个文本不是黄色的<代码>此代码不是黄色。
但是换行后,代码是黄色的代码>
示例B(不想要的行为)
这个文本不是黄色的<代码>此代码不是黄色。
换行后,会有更多的文本。。。
…但代码仍然是黄色的代码>
例C
这个文本不是黄色的<代码>此代码不是黄色。
换行后,有更多的文本和一个空的跨度。。。
这样代码就不再是黄色了代码>
这不是CSS问题,而是对和
标记的语义和用途的误解
TL:DR:在担心CSS之前,将HTML重新构造为语义正确,并适当使用CSS类,而不是使用同级选择器使代码复杂化:
。突出显示{
背景颜色:黄色;
}
你的第一段
没有换行符的第二段
。。。突出显示的代码…
第三段
。。。此代码未突出显示…
为什么不将需要更改背景的所有元素都放在
<div style="background-color: yellow;">
<br>
<p>
</div>
使用:nth-child()
选择器,可以从其父元素继承其背景色,也可以使用自定义背景色替代。例如,它可以在给定的HTML中实现,如下所示:
br+code{
背景颜色:黄色;
}
h2:n个子(3)+p代码:n个子(3){
背景色:继承;
}
示例A(这是正确的)
这个文本不是黄色的<代码>此代码不是黄色。
但是换行后,代码是黄色的代码>
示例B(不想要的行为)
这个文本不是黄色的<代码>此代码不是黄色。
换行后,会有更多的文本。。。
…但代码仍然是黄色的代码>
例C
这个文本不是黄色的<代码>此代码不是黄色。
换行后,有更多的文本和一个空的跨度。。。
这样代码就不再是黄色了代码>
就目前而言,我认为没有一种纯CSS的方法可以在不涉及HTML代码的情况下修复示例B。但是,我很好奇,为什么要用这种方式定义代码背景色?在我看来,最好是专门为需要黄色背景的code
元素添加一个CSS类,因为它不依赖HTML结构,而且更易于维护/阅读/理解,我觉得很有趣。投票给你的问题+1我相信其他人也一样,但对我来说,不清楚哪个文本应该是黄色的。你的意思是“这个文本/代码不是黄色的。”应该是黄色的吗?好的,明白了。我想说的是,在所有示例中,知道您需要的黄色文本会更有用,因为正在使用全局CSS。使用js迭代所有
,检查以前的同级,并根据我的理解切换类或内联样式,但问题是我的处境不允许这样。我不能使用课堂。我将编辑我的问题以进一步解释;你能想出另一个解决方案吗?@ExpertCoder14:IMO,因为你写的是一个用户脚本,而不是一个用户样式(因此不局限于只使用CSS),你最好把HTML改成更易于管理的东西,而不是把CSS塞进标签汤中。论坛对帖子中允许使用什么HTML的限制并不影响用户脚本的功能。但是,这确实意味着任何想要按您的意图查看内容的人都需要使用您的用户脚本。@BoltClock好的,我想可能是这样的。我想这对我来说又回到了绘图板上,学习更多关于创建用户脚本的知识。我的问题的上下文不允许这样做。请仔细查看对问题的编辑。问题是,代码并不总是该段落的第三个子项。。。