CSS选择器“~”与“+”
来源：互联网 发布：身材好的女友知乎 编辑：程序博客网 时间：2024/06/06 08:53
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.div1{
width:200px;height:200px;background: red
}
.div1:hover ~p+a{background: red;} //鼠标移动到classname为‘div1’上时，改变与 div1为同级元素关系的 p元素 的相邻 元素a的样式（同级元素：即是指此处的div1与p 必须拥有相同的父级）
p{width:100px;height:30px;background: blue;}
</style>
</head>
<body>
<div class="div1"><p></p></div>
<p></p>
<a>我是紧跟p后面的a标签</a>
<p></p>
<!-- <a>111</a>
--></body>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.div1{
width:200px;height:200px;background: red
}
.div1:hover ~p+a{background: red;} //鼠标移动到classname为‘div1’上时，改变与 div1为同级元素关系的 p元素 的相邻 元素a的样式（同级元素：即是指此处的div1与p 必须拥有相同的父级）
p{width:100px;height:30px;background: blue;}
</style>
</head>
<body>
<div class="div1"><p></p></div>
<p></p>
<a>我是紧跟p后面的a标签</a>
<p></p>
<!-- <a>111</a>
--></body>
</html>
阅读全文
0 0
- css选择器与jquery选择器
- css选择器与权重
- CSS选择器“~”与“+”
- 定位与css选择器
- css选择器与优先级
- CSS选择器与层叠
- CSS ID选择器与CLASS选择器
- 0016-jQuery选择器与CSS选择器
- CSS样式表与选择器
- CSS选择器与样式优先级
- IE 兼容与CSS选择器
- CSS之选择器与列表
- CSS选择器特殊性与重要性
- CSS文字属性与选择器
- CSS简介与选择器优先级
- CSS选择器与优先级详解
- CSS定位与CSS属性选择器
- CSS基本选择器与CSS样式引入
- python学习
- hdu1722--cake
- Linux多线程编程
- Activity的模式，退出应用程序
- 从零开始构建部署上线Node.js+Express+Bootstrap+Jade响应式网站应用—RSPT丨留学生活第一站（三）
- CSS选择器“~”与“+”
- Intellij IDEA bug？
- SQL Server 2005 连接到服务器失败解决方案
- C与Python函数参数传递总结
- Vue绑定事件指令之表内修改与删除
- C语言应用题——如何确定跳水排名
- make(7)
- Laravel常用的artisan命令
- 使用ReleaseBuffer()后，CString类变量数据清空
