实训第二天0528.pm2
开始学习css（重、难）
一、css选择器（六种）
1、ID选择器
使用id选择器：在元素上面增加一个id属性,id属性的属性值不用用数字开头
一个页面中只能有一个id属性值
css中id选择的表示方法用 “#” 表示
2、class选择器
使用class选择器：在元素上增加一个class属性，class属性的属性值不能用数字开头
一个页面中可以有多个class属性值
css中class选择器的表示方法用“.” 表示
3、标签选择器
直接写标签名
4、组合选择器
选择器直接用","分隔开即可
5、子代选择器
只针对子代
6、后代选择器
用空格表示，包含着子代选择器
通用选择器 (*)针对于所有的标签
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div01{
width: 100px;
height: 100px;
background-color: #ff0;
}/*id选择器*/
.d1{
width: 200px;
height: 200px;
background-color: #00f;
}/*class选择器*/
a,input,button{
width: 200px;
height: 200px;
background-color: #00f;
}/*标签选择器*/
.grand{
width: 500px;
height: 500px;
background-color: #f00;
}/*子代选择器*/
.grand .father{
width: 100px;
height: 100px;
background-color: #FFFF00;
}/*子代选择器*/
.grand .son{
width: 300px;
height: 300px;
background-color: #000;
}/*后代选择器*/
*{
border: 10px solid #f00;
}/*通用选择器*/
</style>
</head>
<body>
<div id="div01"></div><!--id选择器-->
<div class="d1"></div><!--class选择器-->
<p class="d1"></p><!--标签选择器-->
<a href="">内容</a><!--标签选择器-->
<input type="text" /><!--标签选择器-->
<button></button><!--标签选择器-->
<div class="grand"><!--子代选择器-->
grand
<div class="father">
father
<div class="son">
son
</div>
</div>
</div>
</body>
</html>
