1. 結(jié)構(gòu)偽類（strctural pseudo-classes）- :nth-child()

1. ：nth-child(1)

：nth-child(1){
color：red；
}
是父元素中的第1個子元素，不管是第幾層的父元素再菊，只要它相對于它的父元素是第一個孩子递递，它就會被選中
如果加個p,就變成了交集選擇器秽浇，1.必須是p元素召廷，2.p元素必須是向?qū)τ谒母冈氐牡牡谌齻€孩子
P:nth-child(3){
color：red揖闸；
}

P:nth-child(1){
color：red句灌；
}是選擇p元素夷陋，并且相對于父親是第一個子元素

P :nth-child(1){
color：red；
}

中間有空格胰锌， 是一個后代選擇器骗绕，是p元素后代里面的第一個子元素，兒子孫子都沒關(guān)系

2. ：nth-child(2n)资昧，nth-child(3n)

:nth-child(2n)
n代表任意正整數(shù)和0
是父元素中的第偶數(shù)個子元素（第2酬土、4、6格带、8......個）
跟:nth-child(even)同義

3. ：nth-child(2n + 1)

:nth-child(2n + 1)
n代表任意正整數(shù)和0
是父元素中的第奇數(shù)個子元素（第1撤缴、3、5叽唱、7......個）
跟:nth-child(odd)同義

選中前三個

:nth-child(-n + 3)

4.:nth-last-child()

:nth-last-child()的語法跟:nth-child()類似屈呕，不同點是:nth-last-child()從最后一個子元素開始往前計數(shù)
:nth-last-child(1)，代表倒數(shù)第一個子元素
:nth-last-child(-n + 2)棺亭，代表最后2個子元素

5. :nth-of-type( )虎眨、:nth-last-of-type( )

:nth-of-type()用法跟:nth-child()類似，不同點是:nth-of-type()計數(shù)時只計算同種類型的元素

:nth-last-of-type()用法跟:nth-of-type()類似
不同點是:nth-last-of-type()從最后一個這種類型的子元素開始往前計數(shù)

也可以跟n

:nth-of-type(2n)

6. Other

:first-child镶摘，等同于:nth-child(1)
:last-child专甩，等同于:nth-last-child(1)
:first-of-type，等同于:nth-of-type(1)
:last-of-type钉稍，等同于:nth-last-of-type(1)
:only-child涤躲，是父元素中唯一的子元素
:only-of-type，是父元素中唯一的這種類型的子元素
:root贡未，根元素种樱，就是HTML元素

7. :empty

:empty代表里面完全空白的元素

20.1.3 否定偽類（negation pseudo-class）

:not()的格式是:not(x)
x是一個簡單選擇器
元素選擇器蒙袍、通用選擇器、屬性選擇器嫩挤、類選擇器害幅、id選擇器、偽類（除否定偽類）

:not(x)表示除x以外的元素

:not(div){color:red}; 除了div之外的顏色都是紅色岂昭，包括body

所以得

:not(html):not(body):not(div){color:red}

body :not(.text)

:not()支持簡單選擇器以现，不支持組合。

20.2 偽元素（pseudo-elements）

常用的偽元素有,推薦些兩個冒號的约啊，后兩個經(jīng)常用到
:first-line邑遏、::first-line
:first-letter、::first-letter
:before恰矩、::before
:after记盒、::after

為了區(qū)分偽元素和偽類，建議偽元素使用2個冒號外傅，比如::first-line

1.::first-line

::first-line可以針對首行文本設(shè)置屬性
只有下列屬性可以應(yīng)用在::first-line偽元素
字體屬性纪吮、顏色屬性、背景屬性
word-spacing萎胰、letter-spacing碾盟、text-decoration、text-transform技竟、line-height

2.::first-letter

::first-letter可以針對首字母設(shè)置屬性
只有下列屬性可以應(yīng)用在::first-letter偽元素
字體屬性巷疼、margin屬性嚼沿、padding屬性、border屬性骡尽、顏色屬性、背景屬性
text-decoration攀细、text-transform、letter-spacing谭贪、word-spacing（適當?shù)臅r候）、line-height俭识、float、vertical-align（只有當float是none時）

3.::before和::after

::before和::after用來在一個元素的內(nèi)容之前或之后插入其他內(nèi)容（可以是文字套媚、圖片）
在CSS屬性值中缚态，使用url(圖片的URL)來引用圖片
content : url(dot.png);
content : url('dot.png');
content : url("dot.png");

<span>woshispan</span>
span::before{
content : "1";//不能省略
color:red;//給添加的content加顏色
margin-right:20px;
}
span::after{
content : "123";//不能省略
color:red;//給添加的content加顏色
margin-left:20px;
}

偽元素可以看成是行內(nèi)元素
不能設(shè)置width堤瘤，height
可以設(shè)置dsiaplay為inline-block;

2.選擇器的權(quán)重

image.png

3.塊級元素和行內(nèi)元素

image.png

image.png

4.CSS屬性 - overflow

image.png

5.CSS屬性 - box-sizing

? box-sizing用來設(shè)置盒子模型中寬高的行為
? content-box
? padding玫芦、border都布置在width、height外邊
? border-box
? padding本辐、border都布置在width桥帆、height里邊

6.元素的水平居中方案

? 在一些需求中，需要元素在父元素中水平居中顯示（父元素一般都是塊級元素慎皱、inline-block）
? 行內(nèi)級元素(包括inline-block元素)
? 水平居中：在父元素中設(shè)置text-align: center
(text-align：center 只對行內(nèi)元素居中 span/a/ img/input 還有inline-block)
? 塊級元素
? 水平居中：margin: 0 auto

7.盒子模型

7.1 邊框樣式

? 邊框?qū)挾?/strong>

? border-top-width老虫、border-right-width、border-bottom-width宝冕、border-left-width

? border-width是上面4個屬性的簡寫屬性

? 邊框顏色

? border-top-color张遭、border-right-color邓萨、border-bottom-color地梨、border-left-color

? border-color是上面4個屬性的簡寫屬性

? 邊框樣式

? border-top-style、border-right-style缔恳、border-bottom-style宝剖、border-left-style

? border-style是上面4個屬性的簡寫屬性

image.png

image.png

7.2 padding的取值規(guī)律

按照順時針方向設(shè)值：top、right歉甚、bottom万细、left

如果缺少left, 那么left就使用right的值

如果缺少bottom, 那么bottom就使用top的

四個值的話是上右下左

三個值的話是上右下，沒有左纸泄，左邊跟隨右邊的值

兩個值的話是上右赖钞， 下面的值跟隨上，左跟隨右

一個值的話聘裁，上下左右都是使用一個值

7.3 上下margin傳遞(左右不會傳遞)

image.png

margin-top傳遞
如果塊級元素的頂部線和父元素的頂部線重疊雪营，那么這個塊級元素的margin-top值會傳遞給父元素

margin-bottom傳遞
如果塊級元素的底部線和父元素的底部線重疊，并且父元素的高度是auto衡便，那么這個塊級元素的margin-bottom值會傳遞給父元素

如何防止出現(xiàn)傳遞問題献起？

1. 給父元素設(shè)置padding-top\padding-bottom ，不給子元素設(shè)置margin（這樣的話镣陕，子元素和父元素就很不會頂部線對齊了谴餐，就不滿足傳遞的條件了，但是不常用呆抑。）

2. 給父元素設(shè)置border（這個辦法的原理和1一樣映企，但是莫名其妙多了一個邊框很不好）

3. 觸發(fā)BFC: 設(shè)置父元素overflow為auto/hidden

   BFC：結(jié)界 block format context

? 建議
? margin一般是用來設(shè)置兄弟元素之間的間距
? padding一般是用來設(shè)置父子元素之間的間距（上下margin傳遞主要是沒有搞清楚父親和兒子的關(guān)系，父親兒子用padding）

7.4 上下margin的折疊

image.png

image.png

8.盒子陰影 – box-shadow

box-shadow: h-shadow v-shadow blur spread color inset;

image.png

div
{
box-shadow: 10px 10px 5px #888888;
}