gpt4 book ai didi

css-selectors - 通过 CSS 选择器选择两个已知元素之间的所有元素

转载 作者:行者123 更新时间:2023-12-02 01:34:28 25 4
gpt4 key购买 nike

我有两个定义了 ids 的元素,它们之间有任何 html,例如:

<div id='d1'>Hello</div>

<!-- Here come any html code -->
<div>Example</div><hr/><a href="">Example</a>

<div id='d2'>World</div>

是否有选择 #d1 和 #d2 之间的所有元素的 CSS 选择器?

最佳答案

回答:没有。

但是您始终可以选择 JQuery:

$('#id').nextUntil('#id2')

请记住, .nextUntil方法选择之间的所有元素,互斥。要选择包含两个元素的元素,请使用:
$('#id').nextUntil('#id2').andSelf().add('#id2')

<!DOCTYPE html>
<html>
<head>
<style>
.siblings * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("li.start").nextUntil("li.stop").css({"color": "red", "border": "2px solid red"});

$("li.start1").nextUntil("li.stop1").andSelf().add("li.stop1").css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body>

<p>Just selecting all elements in between, exclusive.</p>

<div style="width:500px;" class="siblings">
<ul>ul (parent)
<li>li (sibling)</li>
<li>li (sibling)</li>
<li class="start">li (sibling with class name "start")</li>
<li>li (the next sibling of li with class name "start")</li>
<li>li (the next sibling of li with class name "start")</li>
<li>li (the next sibling of li with class name "start")</li>
<li class="stop">li (sibling with class name "stop")</li>
</ul>
</div>

<p>Just selecting all elements in between, inclusive.</p>

<div style="width:500px;" class="siblings">
<ul>ul (parent)
<li>li (sibling)</li>
<li>li (sibling)</li>
<li class="start1">li (sibling with class name "start")</li>
<li>li (the next sibling of li with class name "start")</li>
<li>li (the next sibling of li with class name "start")</li>
<li>li (the next sibling of li with class name "start")</li>
<li class="stop2">li (sibling with class name "stop")</li>
</ul>
</div>

</body>
</html>


在我看来,这是最简单的选择。

关于css-selectors - 通过 CSS 选择器选择两个已知元素之间的所有元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32035432/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com