码迷,mamicode.com
首页 > Web开发 > 详细

css_选择器

时间:2020-06-09 23:53:42      阅读:120      评论:0      收藏:0      [点我收藏+]

标签: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>

css_选择器

标签:size   选择器   综合   red   doc   type   div   head   筛选   

原文地址:https://www.cnblogs.com/zxy01/p/13081468.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!