CSS选择器
2016-07-13 本文已影响17人
我的梦想之路
CSS的两大重点
1>属性
通过属性的复杂叠加才能得到漂亮的网页
2>选择器
通过选择器找到对应的标签设置样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*标签选择器：
根据标签名找到对应的标签
* */
div{
color: red;
}
/*类选择器：
格式：.类名
* */
.class{
color: aqua;
/*background-color: #FF0000;*/
font-size: 20px;
}
/*id选择器：
格式：#id名
* */
#font{
color: blue;
}
/*并列选择器：
根据并列的名称进行设置
* */
#font,.class{
background-color: purple;
}
/*复合选择器:
首先是div,然后又是类名为class的。
* */
div.class{
font-size: 30px;
}
/*后代选择器：包含孙子，儿子等等（只要是在这个标签里面的）
常用；以空格为标志
* */
div p{
color: royalblue;
}
/*子代选择器：只包含儿子（在这个标签里面只有一层标签的）
以箭头为标志
* */
div>p{
color: chartreuse;
}
/*相邻兄弟选择器*/
div+p{
color: brown;
}
/*一维 属性选择器：
相当于数组
* */
div[name]{
color: crimson;
}
/*二维属性选择器：
两个属性
* */
div[name][age]{
color: bisque;
}
/*还是属性选择器*/
div[age="10"]{
font-size: 25px;
}
/*伪类选择器*/
div:hover{
background-color: green;
}
div:focus{
background-color: greenyellow;
}
</style>
</head>
<body>
<div id="font">一点点的消失不见</div>
<br />
<div>一点点的消失不见</div>
<br />
<div class="class">在这个过程你我都不知道</div>
<p class="class">你不认识我，我记得的你</p>
<hr width=100% />
<!--后代选择器-->
<div>
<p>子代</p>
<span>
<p>后代</p>
</span>
</div>
<p>与div相邻的p</p>
<p>与p相邻的p</p>
<hr width=100% />
<div name="jack">一维属性</div>
<div age="10">一维属性选择器</div>
<div name="rose" age="10">二维属性选择器</div>
<hr width=100% />
<!--伪类-->
</body>
</html>
