CSS交互最常用到的有设备指针移入移出，我们以此为例简单探讨一下如何利用CSS伪类来实现通过子元素的交互动作控制父元素。以下例子我们创建一个div元素，里面有两个不同类型的按钮和一个文本框，两个按钮在设备指针移到其上时都会改变div元素的背景色。看代码和效果：

<style>
	.pa { margin: 20px autp; width: 600px; height: 80px; border: 1px solid gray; padding: 20px; }
	.pa:has(button:hover) { background: tan; }
	.pa:has(input[type=button]:hover) { background: beige; }
</style>

<div class="pa">
	<button type="button">button按钮</button>
	<input type="button" value="input按钮" />
	<input type="text" value="text文本框" />
</div>
	

CSS代码中，类选择器 .pa 首先使用 :has 伪类进行查询，has是有的意思。第三行代码查询 button 元素，并给该元素一个指针滑过交互的伪类 :hover，总体意思是 .pa 之下的 button 的 hover 事件将会触发花括号设置的样式，{ background: tan; }，即设置父元素 .pa 的背景色；第4行代码原理与第3行一样，这个按钮是 input 按钮，input标签有很多类型，所以第3行的查询限制使用中括号指明类型；input文本框则没有在CSS中设置交互动作，指针移动到它那里啥事也不会发生。

具体来讲，子元素通过CSS交互控制父元素，由父元素选择器发出，它查询有没有指定的子元素，子元素可以是标签选择器（如上面演示示例的 button、input），也可以是类选择器（例如：.pa:has(.mybox:hover) {...}）和id选择器（例如：例如：.pa:has(#mypic:hover) {...}）等等合法的CSS实体选择器。

【附一】CSS交互父元素控制子元素： .pa:hover #son { background: green; }

【附二】CSS交互父元素控制所有指定子元素： .pa:hover > span { color: red; }

【附三】CSS交互同父元素下控制下一个兄弟元素：#son2:hover + #son3 { background: pink; }

【附四】CSS交互同父元素下控制后面所有兄弟元素：#son2:hover + div { background: gray; }

还有更多的此类操作，这里就不一一介绍了。