我是每天被自己菜醒的跳跳，嗯~就很菜！
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 他最終的數字最大他的優先級最高.
注意行間樣式是最高的，和上面計算沒有任何關係。
本人是個菜逼，理解有錯誤的地方，歡迎指正。記錄下學習筆記。