CSS交互之子元素控制父元素
<style>.artbox { font-size: 16px; }
.artbox > p { margin: 10px 0; }
.artbox mark { background: lightblue; padding: 2px 6px; }
</style>
<div class="artbox">
<p>CSS交互最常用到的有设备指针移入移出，我们以此为例简单探讨一下如何利用CSS伪类来实现通过子元素的交互动作控制父元素。以下例子我们创建一个div元素，里面有两个不同类型的按钮和一个文本框，两个按钮在设备指针移到其上时都会改变div元素的背景色。看代码和效果：</p>
<div id="hEdiv"><pre id="hEpre">
<style>
.pa { margin: 20px autp; width: 600px; height: 80px; border: 1px solid gray; padding: 20px; }
.pa:has(button:hover) { background: tan; }
.pa:has(input:hover) { background: beige; }
</style>
<div class="pa">
<button type="button">button按钮</button>
<input type="button" value="input按钮" />
<input type="text" value="text文本框" />
</div>
</pre></div>
<div id="showBox"></div>
<p>CSS代码中，类选择器 .pa 首先使用 :has 伪类进行查询，has是有的意思。第三行代码查询 button 元素，并给该元素一个指针滑过交互的伪类 :hover，总体意思是 .pa 之下的 button 的 hover 事件将会触发花括号设置的样式，</mark>{ background: tan; }</mark>，即设置父元素 .pa 的背景色；第4行代码原理与第3行一样，这个按钮是 input 按钮，input标签有很多类型，所以第3行的查询限制使用中括号指明类型；input文本框则没有在CSS中设置交互动作，指针移动到它那里啥事也不会发生。</p>
<p>具体来讲，子元素通过CSS交互控制父元素，由父元素选择器发出，它查询有没有指定的子元素，子元素可以是标签选择器（如上面演示示例的 button、input），也可以是类选择器（例如：<mark>.pa:has(.mybox:hover) {...}</mark>）和id选择器（例如：例如：<mark>.pa:has(#mypic:hover) {...}</mark>）等等合法的CSS实体选择器。</p>
<p>【附一】CSS交互父元素控制子元素： <mark>.pa:hover #son { background: green; }</mark></p>
<p>【附二】CSS交互父元素控制所有指定子元素： <mark>.pa:hover > span { color: red; }</mark></p>
<p>【附三】CSS交互同父元素下控制下一个兄弟元素：<mark>#son2:hover + #son3 { background: pink; }</mark></p>
<p>【附四】CSS交互同父元素下控制后面所有兄弟元素：<mark>#son2:hover + div { background: gray; }</mark></p>
<p>还有更多的此类操作，这里就不一一介绍了。</p>
</div>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/helight/helight1.js';
hlight.hl(hEdiv, hEpre);
showBox.innerHTML = hEpre.textContent;
</script>
关键是 :has 伪类，使用这个了父元素整个就发生改变了。{:4_187:} 附件里还有父元素控制子元素的例子。去试了，附件里的触动下只有子元素自己发生变化。
附件三和附件四好像没用过呢。 学习了，谢谢老师辛苦。 梦江南 发表于 2025-3-11 17:38
学习了，谢谢老师辛苦。
这个知识点其实是很难的，没有较为全面的CSS基础是弄不懂的。不过它对做帖子的用处不大 一看到烧脑的就想溜咋整。。。。
把那个文本按纽加个颜色呗，就它没有。
我加了个试了下。。怪好看的。{:4_173:}
花飞飞 发表于 2025-3-11 19:00
一看到烧脑的就想溜咋整。。。。
把那个文本按纽加个颜色呗，就它没有。
我加了个试了下。。怪好看的。{: ...
这个东东不是为了好看，是为了体现文章的宗旨 红影 发表于 2025-3-11 13:47
关键是 :has 伪类，使用这个了父元素整个就发生改变了。
拐点弯的操作，CSS没有子元素直接控制父元素的定义 马黑黑 发表于 2025-3-11 19:28
这个东东不是为了好看，是为了体现文章的宗旨
{:4_173:}又体现宗旨又好看，多好呀。 花飞飞 发表于 2025-3-11 19:50
又体现宗旨又好看，多好呀。
那区别不出区别 马黑黑 发表于 2025-3-11 19:51
那区别不出区别
好的吧，我算开发了它的好看的新用途。。虽然没啥用{:4_173:} 马黑黑 发表于 2025-3-11 19:36
拐点弯的操作，CSS没有子元素直接控制父元素的定义
拐点弯是什么啊？ 红影 发表于 2025-3-11 20:38
拐点弯是什么啊？
就是要通过 CSS 的 has，不是直接的 马黑黑 发表于 2025-3-11 20:43
就是要通过 CSS 的 has，不是直接的
这些术语头一次看到，所以有点蒙。谢谢黑黑解答{:4_187:} 红影 发表于 2025-3-11 20:48
这些术语头一次看到，所以有点蒙。谢谢黑黑解答
我说过CSS的水也可以很深 花飞飞 发表于 2025-3-11 20:26
好的吧，我算开发了它的好看的新用途。。虽然没啥用
{:4_189:} 马黑黑 发表于 2025-3-11 20:50
我说过CSS的水也可以很深
嗯，现在越来越感受到了{:4_173:} 红影 发表于 2025-3-11 20:56
嗯，现在越来越感受到了
大漠大佬目前是对CSS研究最深刻的人，而且它会跟进新标准，尚未发布的、正在讨论或测试中的标准他也会了如指掌 马黑黑 发表于 2025-3-11 23:14
大漠大佬目前是对CSS研究最深刻的人，而且它会跟进新标准，尚未发布的、正在讨论或测试中的标准他也会了 ...
还是黑黑了解，我对这位大佬还一点都不知道呢{:4_173:} 红影 发表于 2025-3-12 10:11
还是黑黑了解，我对这位大佬还一点都不知道呢
中国前端CSS布道者之一，而且是影响力最大的，因他和其它志同道合者的共同努力，才有今天中国前端技术不落后于人的结果