前端學習 Css 子元素的偽類

:first-child 尋找父元素的第乙個子元素，在所有的子元素中排序；

:last-child 尋找父元素的最後乙個子元素，在所有的子元素中排序；

:nth-child 尋找父元素中的指定位置子元素，在所有的子元素中排序；

:first-of-type 尋找指定型別中的第乙個子元素

:last-of-type 尋找指定型別中的最後乙個子元素

:nth-of-type 尋找指定型別中的指定子元素

可以使用even，來找到偶數的子元素

可以使用odd，來找到奇數的子元素

demo:

doctype html

>
<
html
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>
title
>
<
style 
type
="text/css"
>
/*:first-child 尋找父元素的第乙個子元素，在所有的子元素中排序；
*/p:first-child
/*:last-child 尋找父元素的最後乙個子元素，在所有的子元素中排序；
*/p:last-child
/*:nth-child 尋找父元素中的指定位置子元素，在所有的子元素中排序；
*/p:nth-child(3)
/*:first-of-type 尋找指定型別中的第乙個子元素
*/h3:first-of-type
/*:last-of-type 尋找指定型別中的最後乙個子元素
*/h3:last-of-type
/*:nth-of-type 尋找指定型別中的指定子元素
*/h3:nth-last-of-type(2)
/*可以使用even，來找到偶數的子元素
可以使用odd，來找到奇數的子元素
*/h4:nth-last-of-type(even)
h4:nth-last-of-type(odd)
style
>
head
>
<
body
>
<
p>有時關切是問，有時關切是不問。
p>
<
h3>----我是分割線1----
h3>
<
p>這樣水波不興，你好我也好。
p>
<
h3>----我是分割線2----
h3>
<
p>山還是山，水還是水，生活和工作終會照舊。
p>
<
h3>----我是分割線3----
h3>
<
p>希望觀念的改變能留得長久些：敬天憫人，相信人心
p>
<
h3>----我是分割線4----
h3>
<
br/>
<
br/>
<
br/>
<
h4>水 
h4>
<
h4>你眼睛的面積一定小於湖 
h4>
<
h4>你也很少哭 
h4>
<
h4>為什麼坐在你面前 
h4>
<
h4>就像站在湖邊
h4>
<
h4>細細的霧水就扯地連天 
h4>
body
>
html
>

前端學習 Css 子元素的偽類

first child 尋找父元素的第乙個子元素，在所有的子元素中排序 last child 尋找父元素的最後乙個子元素，在所有的子元素中排序 nth child 尋找父元素中的指定位置子元素，在所有的子元素中排序 first of type 尋找指定型別中的第乙個子元素 last of type ...

前端學習 Css 偽元素

first letter 表示第乙個字元 first line 表示文字的第一行 before 選中元素的最前邊，一般該偽類都會結合content一起使用，通過content可以向指定位置新增內容。after 選中元素的最後邊，一般該偽類都會結合content一起使用，通過content可以向指定位...

css偽類，偽元素

偽類作用於整個元素，比如 a link a hover div first child 儘管這些條件都不是基於dom的，但結果沒乙個都是作用於乙個完整的元素，比如整個鏈結，段落，div等等 偽元素作用於元素一部分，比如 p first line p first letter 偽元素作用於元素的一部分...