如何 select 在嵌套元素之后紧接下一个元素?
How to select immediate next element after nested elements?
我需要将样式应用到紧接在两个嵌套无序列表之后的段落。我知道在一个 ul 之后立即将样式应用于段落的方法是:
.class ul+p
但我不知道如何缩小范围以仅在两个嵌套的 ul 之后生效?这是我尝试这样做的方法,但它不起作用:
.class ul ul + p
代码示例:
.class ul + p {
color:red;
}
.class ul ul {
color:purple;
}
/* This is just an example of what I tried, does not work */
.class ul ul + p {
color:green;
}
<div class="class">
<ul>
<li>Item a</li>
<li>Item b
<ul>
<li>Item c (Nested list, CSS for this works fine)</li>
<li>Iten d (should be purple)</li>
</ul>
</li>
</ul>
<p>Paragraph after nested ul, this is the one I can't get to work,
what kind of CSS would I need? (should be green)</p>
<ul>
<li>item e</li>
<li>item f</li>
</ul>
<p>Paragraph after single ul, CSS for this works fine (should be red)</p>
</div>
你的代码说你想定位嵌套无序列表项(蓝色)内的相邻段落,我举了一个例子,它是父 ul 的相邻段落(红色),所以你使用哪个取决于您想要的效果(您没有 post 您的 HTML)。
这里的问题是 CSS 由于全局级联而向内工作,而不是向外工作,所以要以另一种方式做到这一点需要 JavaScript。
(编辑:我编辑了代码,以绿色显示嵌套 ul 的相邻段落)
ul ul + p {
color: blue;
}
ul + p {
color: red;
}
.ul-nested--class + p {
color: green;
}
<ul class="ul-nested--class">
<li>List thing</li>
<li>List thing</li>
<li>List thing</li>
<li>
<ul>
<li>List thing</li>
<li>List thing</li>
<li>List thing</li>
<li>List thing</li>
</ul>
<p>This does validate</p>
<p>This does validate</p>
<p>This does validate</p>
<p>This does validate</p>
</li>
</ul>
<p>Next paragraph</p>
<p>Next paragraph</p>
<p>Next paragraph</p>
<p>Next paragraph</p>
<p>Next paragraph</p>
ul ul + p
不起作用,因为该段落是第一个 ul
.
的同级段落
嵌套的 ul
,是第一个 ul
的后代,不是 p
的兄弟姐妹。因此,下一个兄弟组合器 (+
) 无法按预期运行。
<ul><!-- top level ul; sibling of the parapraph element -->
<li>Item a</li>
<li>Item b
<ul><!-- nested ul; not a sibling of the parapraph element -->
<li>Item c (Nested list, CSS for this works fine)</li>
<li>Iten d (should be purple)</li>
</ul>
</li>
</ul>
<p>Paragraph after nested ul, this is the one I can't get to work,
what CSS would I need? (should be green)</p><!-- sibling of the top level ul -->
对于纯 CSS 解决方案,您需要类似 :has()
伪 class 的东西。选择器可能如下所示:
ul:has(> ul) + p
很遗憾,:has()
是 not yet supported by any major browsers。
所以,尝试 JavaScript。
您可以通过为父 ul 元素提供一个 id 或 class 并使用 + 选择器来定位段落来实现这一点。像这样:
#idname/.classname + p {
//Do whatever you want
}
我需要将样式应用到紧接在两个嵌套无序列表之后的段落。我知道在一个 ul 之后立即将样式应用于段落的方法是:
.class ul+p
但我不知道如何缩小范围以仅在两个嵌套的 ul 之后生效?这是我尝试这样做的方法,但它不起作用:
.class ul ul + p
代码示例:
.class ul + p {
color:red;
}
.class ul ul {
color:purple;
}
/* This is just an example of what I tried, does not work */
.class ul ul + p {
color:green;
}
<div class="class">
<ul>
<li>Item a</li>
<li>Item b
<ul>
<li>Item c (Nested list, CSS for this works fine)</li>
<li>Iten d (should be purple)</li>
</ul>
</li>
</ul>
<p>Paragraph after nested ul, this is the one I can't get to work,
what kind of CSS would I need? (should be green)</p>
<ul>
<li>item e</li>
<li>item f</li>
</ul>
<p>Paragraph after single ul, CSS for this works fine (should be red)</p>
</div>
你的代码说你想定位嵌套无序列表项(蓝色)内的相邻段落,我举了一个例子,它是父 ul 的相邻段落(红色),所以你使用哪个取决于您想要的效果(您没有 post 您的 HTML)。
这里的问题是 CSS 由于全局级联而向内工作,而不是向外工作,所以要以另一种方式做到这一点需要 JavaScript。
(编辑:我编辑了代码,以绿色显示嵌套 ul 的相邻段落)
ul ul + p {
color: blue;
}
ul + p {
color: red;
}
.ul-nested--class + p {
color: green;
}
<ul class="ul-nested--class">
<li>List thing</li>
<li>List thing</li>
<li>List thing</li>
<li>
<ul>
<li>List thing</li>
<li>List thing</li>
<li>List thing</li>
<li>List thing</li>
</ul>
<p>This does validate</p>
<p>This does validate</p>
<p>This does validate</p>
<p>This does validate</p>
</li>
</ul>
<p>Next paragraph</p>
<p>Next paragraph</p>
<p>Next paragraph</p>
<p>Next paragraph</p>
<p>Next paragraph</p>
ul ul + p
不起作用,因为该段落是第一个 ul
.
嵌套的 ul
,是第一个 ul
的后代,不是 p
的兄弟姐妹。因此,下一个兄弟组合器 (+
) 无法按预期运行。
<ul><!-- top level ul; sibling of the parapraph element -->
<li>Item a</li>
<li>Item b
<ul><!-- nested ul; not a sibling of the parapraph element -->
<li>Item c (Nested list, CSS for this works fine)</li>
<li>Iten d (should be purple)</li>
</ul>
</li>
</ul>
<p>Paragraph after nested ul, this is the one I can't get to work,
what CSS would I need? (should be green)</p><!-- sibling of the top level ul -->
对于纯 CSS 解决方案,您需要类似 :has()
伪 class 的东西。选择器可能如下所示:
ul:has(> ul) + p
很遗憾,:has()
是 not yet supported by any major browsers。
所以,尝试 JavaScript。
您可以通过为父 ul 元素提供一个 id 或 class 并使用 + 选择器来定位段落来实现这一点。像这样:
#idname/.classname + p {
//Do whatever you want
}