标签:size 选择器 综合 red doc type div head 筛选
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<style>
/*通用*/
*{
font-size: 30px;
}
p{
color: #5fb57d;
}
/**/
#p_id1{
color: #b18621;
}
/*类*/
.p_c1{
color: #364e98;
}
/*# 后代选择器*/
div p{
background: #364e98;
}
/* 综合练习 */
/*#id-001 .class-001 .class-003{*/
/* background: #fac237;*/
/*}*/
/*!* 子代 *! 只筛选“儿子层”*/
#id-001>.class-003{
font-size: 40px;
}
#id-001{
font-size: 50px;
}
/*并行*/
#p,#p_id1{
color: #4A154B;
}
/*比邻*/
#id-001+p{
color: red;
}
</style>
</head>
<body>
<p id="p">hello p1</p>
<div id="id-001">
hello div
<span>
hello span
</span>
<p>hello pp1</p>
<p class="class-003">hello pp2</p>
<div class="class-001">hello dd
<p class="class-003">ppppp</p>
</div>
</div>
<p id="p_id1">pp</p>
<p class="p_c1">hello p3</p>
<p class="p_c1">hello p4</p>
<p class="p_c1">hello p5</p>
</body>
</html>
标签:size 选择器 综合 red doc type div head 筛选
原文地址:https://www.cnblogs.com/zxy01/p/13081468.html