当前位置：首页 > wzjs >正文

设计本app苏州搜索引擎优化

wzjs 2025/8/8 4:44:50

设计本app,苏州搜索引擎优化,整形网站建设方案策划书,手机访问跳转手机网站示例 :has用于选择具有某个子元素的父元素，还可以选择后面紧跟着某个元素的当前元素。参考：https://blog.csdn.net/qq_24956515/article/details/147512895 选择具有某个子元素的父元素父元素内包含子元素下面代码选择包含子元素p的div&#xff0c…

示例

:has用于选择具有某个子元素的父元素，还可以选择后面紧跟着某个元素的当前元素。

参考：https://blog.csdn.net/qq_24956515/article/details/147512895

选择具有某个子元素的父元素

父元素内包含子元素

下面代码选择包含子元素p的div，为其设置圆角边框：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>div {width: 140px;height: 100px;border: 1px solid #000;margin: 10px;text-align: center;float: left;}div:has(p) {border-radius: 20px;}</style></head><body><div><h3>title</h3></div><div><p>Hello</p></div></body>
</html>

效果图：
在这里插入图片描述

父元素内包含子元素伪类

当鼠标悬浮在子元素p上面时，设置父元素div的背景颜色：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>div{width: 100px;height: 100px;border: 1px solid #000;text-align: center;}p:hover{color: red;}div:has(p:hover){background-color: yellowgreen;}</style></head><body><div><p>pppppp</p></div></body>
</html>

效果图：

在这里插入图片描述

选择后面紧跟着某个元素的当前元素

为后面紧跟p元素的h3设置红色，为后面紧跟span元素的h3设置蓝色：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>h3:has(+p){color:red;}h3:has(+span){color:blue;}</style></head><body><h3>h3</h3><p>p</p><h3>h3</h3><span>span</span></body>
</html>