【相邻父元素选择器】为啥p元素里面的h3也被选择了呢?求赐教
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 后代选择器会把后代里面所有层级的都选择,子代中间有一层不符合的就不会选择*/
/* 后代选择器形式上只能写一层 */
div p{
width: 500px;
outline:2px solid #0000FF;
background-color: #00FF00;
}
div> p{
width: 500px;
outline:2px solid #ff2684;
}
/* 设置p元素下面所有的兄弟节点 */
p~p{
color:red
}
p+h3{
color:blue;background-color: orange;
height: 80px;
}
/* 设置p元素下面紧挨着的兄弟节点 */
p+p{
border-radius: 20px;
}
#t1{
margin-left: 20px;
text-decoration: underline;
padding: 5px;
margin-bottom: 10px;
/* 边框不能被子代继承 */
outline:1px solid #0000FF;
}
</style>
</head>
<body>
<div id='t1' style='background-color: #007000;width: 100px;height: 100px;'>
<div style='background-color: #700d70;width: 50px;height: 50px;'>
div
</div>
DIV
</div>
<div>
<p>div里面的P1
<p style='text-indent: 20px;'>div里面的P1里面的P1
<h3 style='text-indent: 40px;'>div里面的P1里面的P1再里面的h3
<p style='text-indent: 60px;'>div里面的P1里面的P1再里面的h3再里面的P</p>
</h3>
</p>
</p>
<p>div里面的P2
<p style='text-indent: 20px;'>div里面的P2里面的P1</p>
</p>
<p>
div里面的P3
</p>
<h3>hhhhhhhhhhhhhhhhhhhhhhhhh</h3>
<h3>HHHHHHHHHHHHHHHHHHHHHHHHH</h3>
<p>
div里面的P4
</p>
</div>
</body>
</html>
最新文章
- replace U to T in mature.fa
- golang中的类和接口的使用
- iOS隐私政策
- MappingJacksonHttpMessageConverter过期
- 括号配对问题_栈<;stack>;
- [Tip] 如何在BeyondCompare中忽略不重要的区别.
- 车牌识别LPR(四)-- 车牌定位
- 【转帖】error C2296: “^”: 非法,左操作数包含“double”类型
- 使用android x86进行android应用开发.
- Libnids---编写网络应用程序的利器
- Unity之Avatar原理
- Ceph QoS 初探(下)
- DNS搜索过程
- C#代码使用Process类调用SWFTools工具
- MobSF移动渗透测试框架
- cf1144E 假高精度平均数
- android + eclipse + 后台静默安装(一看就会)
- 欧几里得算法(及扩展)&;&;快速幂(二分+位运算)
- 西部世界第二季全集高清百度云在线观看BT种子迅雷下载
- windows7 sqlserver2012 无法写入受保护的内存 解决办法