css选择器 介绍
- 标签选择器:根据标签名称定义所有标签都采用此种形式
- 类选择器:在标签中,每个标签都有一个属性class,此属性用来分类标签
ID选择器:每个标签都有一个属性,此属性值在当前HTML里必须具有唯一性,否则从第二个开始失去效果
将这些综合一起:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div/*标签选择器*/
{
background-color: crimson;
width: 300px;
height: 200px;
margin: 20px 20px 20px 20px;/*盒子模型*/
padding:30px 30px 30px 30px;
}
.divtest/*类选择器*/
{
background-color: antiquewhite;
width: 200px;
height: 100px;
margin: 20px 20px 20px 20px;
padding:30px 30px 30px 30px;
}
#firstDIV/*ID选择器*/
{
background-color: blueviolet;
width 100px;
height: 100px;
margin: 20px 20px 20px 20px;
padding:30px 30px 30px 30px;
}
div span
{
font-size: 20px;
color: brown;
}
input
{
color: #FAEBD7;
}
</style>
</head>
<body>
<div id="firstDIV"><span>第一个</span></div>
<!--
作者:offline
时间:2018-07-28
描述:这里有点问题,按概念记就好,ID选择器对第二个是不起作用的
-->
<div id="firstDIV"><span>第二个</span></div>
<div class="divtest"><span>第三个</span></div>
<div class="divtest"><span>第四个</span></div>
<div>学生<input type="text" id="stuname"</div>
</body>
</html>
完毕