要给一个元素的兄弟元素设置红色，你需要使用CSS结合JavaScript或jQuery。以下提供几种方法：
1. 使用 JavaScript 和 nextElementSibling / previousElementSibling:
这是最直接的方法，适用于给特定元素的下一个或上一个兄弟元素设置样式。
// 获取目标元素
const targetElement = document.getElementById("myElement");
// 设置下一个兄弟元素为红色
if (targetElement.nextElementSibling) {
targetElement.nextElementSibling.style.color = "red";
}
// 设置上一个兄弟元素为红色
if (targetElement.previousElementSibling) {
targetElement.previousElementSibling.style.color = "red";
}
2. 使用 JavaScript 和 parentNode.children:
这种方法可以遍历目标元素的所有兄弟元素。
const targetElement = document.getElementById("myElement");
const siblings = targetElement.parentNode.children;
for (let i = 0; i < siblings.length; i++) {
if (siblings[i] !== targetElement) { // 排除目标元素本身
siblings[i].style.color = "red";
}
}
3. 使用 jQuery 和 siblings():
jQuery 提供了更简洁的方法。
$("#myElement").siblings().css("color", "red");
4. 使用 CSS 和相邻兄弟选择器 + (只作用于紧邻的下一个兄弟元素):
这种方法最简洁，但只适用于目标元素紧邻的下一个兄弟元素。
<p id="myElement">目标元素</p>
<p>下一个兄弟元素</p> <div>另一个元素</div>
#myElement + p {
color: red;
}
5. 使用 CSS 和通用兄弟选择器 ~ (作用于之后的所有兄弟元素):
这个方法可以作用于目标元素之后的所有兄弟元素.
<p id="myElement">目标元素</p>
<p>下一个兄弟元素</p> <div>另一个元素</div> <p>再下一个兄弟元素</p>
#myElement ~ p {
color: red;
}
选择哪种方法取决于你的具体需求:
- 如果你只需要修改特定兄弟元素（例如，下一个或上一个），使用
nextElementSibling或previousElementSibling。 - 如果你需要修改所有兄弟元素，使用
parentNode.children或 jQuery 的siblings()。 - 如果你只需要修改紧邻的下一个兄弟元素，并且可以使用CSS，那么使用
+选择器。 - 如果你需要修改目标元素后的所有兄弟元素，并且可以使用CSS，那么使用
~选择器。
记住: 在使用 JavaScript 方法时，确保你的代码在 DOM 完全加载后执行，例如将代码放在 DOMContentLoaded 事件监听器中，或者将 <script> 标签放在 <body> 的末尾。
<!DOCTYPE html>
<html>
<head>
<title>兄弟元素示例</title>
<style>
#myElement + p {
color: red; /* CSS 方法，仅影响紧邻的下一个 p 元素 */
}
</style>
</head>
<body>
<p id="myElement">目标元素</p>
<p>下一个兄弟元素</p>
<div>另一个元素</div>
<p>再下一个兄弟元素</p>
<script>
// JavaScript 方法，影响所有兄弟元素
const targetElement = document.getElementById("myElement");
const siblings = targetElement.parentNode.children;
for (let i = 0; i < siblings.length; i++) {
if (siblings[i] !== targetElement) {
siblings[i].style.color = "blue"; // 使用蓝色覆盖CSS样式，以演示效果
}
}
</script>
</body>
</html>
这个例子结合了CSS和JavaScript方法，你可以根据需要注释掉其中一种方法来观察效果。 最终"下一个兄弟元素"会显示蓝色 (JavaScript覆盖了CSS)，而"再下一个兄弟元素" 则不受CSS影响，也显示蓝色。 "另一个元素" 也显示蓝色。
标签：color,标签,元素,兄弟,targetElement,红色,siblings,CSS From： https://www.cnblogs.com/ai888/p/18598636