我是每天被自己菜醒的跳跳，嗯~就很菜！
1. 行间样式
<div id="boy" style="background-color: #000000;">
2. 标签选择器
书写方法：
div{
background: skyblue;
display: inline-block;
padding: 20px 30px 40px 50px ;
}
在css样式表中写以标签的形式书写.
3. id选择器
书写方法：
#d1{
width: 0;
height: 0;
background-color: transparent;
}
id在页面中一个名字有且只能有一个，不能重复使用。
4. class选择器
<div class="d1 d2">
书写方法：
.d1{
width: 500px;
line-height: 100px;
padding: 30px;
font-size: 30px;
background-color: greenyellow;
}
一个元素可以有多个class，以空格间隔，id不可以。元素在页面中可以有多个。
5. 通配符
书写方法：
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
控制整个页面的标签，一般放在css样式表的开头。特性会选中所有的标签
6. 群组选择器
<ul>
<li class="box1"></li>
<li class="box2"></li>
<li class="box3"></li>
</ul>
书写方法：
.box1,.box2,.box3{
width: 100px;
height: 100px;
background-color: red;
}
会给当前所有的选中元素添加上相同的样式，注意以逗号隔开，没有空格
7. 包含选择器
第一种：
<div id="box">
<div class="a">
<div id="c">
</div>
</div>
</div>
书写方法：
#box .a{
width: 100px;
height: 100px;
background-color: red;
}
#box .a #c{
width: 50px;
height: 50px;
background-color: #00FFFF;
}
这里指的是父级id为box，class为a的。注意此处有空格。
嵌套不宜超过三层.
第二种：
<div id="box"></div>
<p class="box"></p>
书写方法：
div#box{
height: 500px;
width: 500px;
background-color: black;
}
选取div的class为box的，给其添加样式，div中class为a的就不会给他添加。这里没有空格。
这里和子元素没有任何关系，就是id为box的div标签。
总结包含选择器：
#d1 div{} 父级id为d1下的所有div的元素。
div.dd{} div的class为dd的元素。
.d1+div{} class为d1的元素后面的一个元素。
.d1~div{} class为d1的元素后面的所有的元素。
.d1>.dd{} 父级class为d1的元素下的class为dd的子元素，也就是他的直接子元素class为dd的所有元素。
ul l1:nth-child(1){} 父级ul标签下第一个li元素。
ul li:last-child{} 父级ul标签下最后一个li元素。
如果子级有id不建议使用包含选择器。因为id唯一，并且优先级又非常高。
7. !important
.d1{
background-color: yellow;
width: 200px !important;
}
优先级最高，高于行间样式，所以没有其它样式可以替换带有!important的样式，慎重使用
8.继承（inherit）
<div class="c1">
<p>继承</p>
</div>
样式：
.c1{
height: 100px;
width: 100px;
border: 1px solid #FFFF00;
}
p{
height: inherit;
}
在子元素没有样式，父元素有样式的情况下，子元素会继承一些父级的样式。
子元素p标签没有继承父元素的height，在p样式里面写height：inherit;就继承了父元素的高度。
优先级：
1. 首先比较的是选择器的优先级，其次在优先级相同的时候，才比较的先后顺序。
2. 基本上范围越大，优先级越低。越精准优先级越高，计算方法可以看下面的注释。
3. !important > 行间样式 > id > class > 标签选择器 > *通配符 > 内部样式和外部样式
注释计算方法：
通配符优先级 0,0,0,0
标签选择器的优先级 0,0,0,1
class选择器优先级 0,0,1,0
id选择器优先级 0,1,0,0
例子：
<div class="red">
<div class="blue">
文字
</div>
</div>>
css样式：
.red{
color: red;
}
.red div{
color: skyblue;
}
这里最终的样式效果是skyblue。
因为 .red是class选择器 优先级 0010=> 10
.red div是class选择器 还有标签选择器，有一个优先级的叠加。
0010 + 0001 = 0011 > 11
最后的结果谁大谁的优先级高。这里的原理我也不是特别清楚。
.red .blue{
color: yellow;
}
.red{
color: red;
}
.red div{
color: skyblue;
}
这里颜色就变成了yellow
因为.red .blue = 0010 + 0010 = 0020 =>20 他最终的数字最大他的优先级最高.
注意行间样式是最高的，和上面计算没有任何关系。
本人是个菜逼，理解有错误的地方，欢迎指正。记录下学习笔记。