<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*全局设置,外边距*/
*{
margin: 0px;
padding: 0px;
}
/*id选择器*/
#d1{
width: 300px;
height: 200px;
background-color: greenyellow;
}
/*class选择器*/
.d3{
width: 300px;
height: 200px;
background-color: lightseagreen;
}
/*标签选择器*/
div{
border: solid black 5px;
}
/*不常用选择器*/
[name=N1]{
width: 300PX;
height: 100PX;
background-color: red;
}
/*并列选择器*/
.d4,.d5{
width: 300px;
height: 200px;
background-color: hotpink;
}
/*单独改字体,并不改其他的字体*/
.c6 span{
color: red;
width: 300px;
height: 200px;
}
/*并列选择器*/
.x1{
width: 300px;
}
.x2{
height: 200px;
}
</style>
<link type="text/css" rel="stylesheet" href="css/sdtyle1.css"/>
</head>
<body>
<!--第一种直接写--> <!--但是这种方式是最后用的-->
<div style="width: 300px; height: 200px; background-color: red;">这是第一种选择器</div>
<!--第二种用选择器-->
<div id="d1">这是第二种id选择器</div>
<!--第三种引入css文档-->
<div id="div2">这是第三种选择器</div>
<div class="d3"></div>
<!--选择器问题-->
<!--id name class-->
<!--不常用选择器-->
<div name="N1"></div>
<!--并列选择器-->
<div class="d4"></div>
<div class="d5"></div>
<!--子代选择器-->
<div class="c6">
<span>啦啦啦啦啦啦</span>
</div>
<span>啦啦啦啦啦</span>
<!--另类并列选择器x1和x2-->
<div class="x1 x2"></div>
<!--（敲黑板）优先级的问题，总的来说后面的代码优先级高-->
</body>
</html>
以上就是我学习和整理的内容，希望看到的同学对里面错误和不合适的地方进行指正，谢谢。
~~明天，又是充满希望的一天。