css可以通過一些選擇器來實現選擇父元素下某個元素的效果。
選擇器有：
-
:first-child p:first-child(first第一個 child子元素)(找第一個子元素為p)
-
:last-child p:last-child(last倒數 child子元素)(找倒數第一個子元素為p)
-
:first-of-type p:first-of-type(first第一個 type類型)(找第一個p)
-
:last-of-type p:last-of-type(last倒數 type類型)(找倒數第一個p)
-
:nth-child(n) p:nth-child(2)(2第二個 child子元素)(找第二個子元素為p)
-
:nth-last-child(n) p:nth-last-child(2)(last倒數 2第二個 child子元素)(找倒數第二個子元素為p)
-
:nth-of-type(n) p:nth-of-type(2)(2第二個 type類型)(找第二個p)
-
:nth-last-of-type(n) p:nth-last-of-type(2)(last倒數 2第二個 type類型)(找倒數第二個p)
-
:only-of-type span:only-of-type(only只有一個 type類型)(只有一個類型為span的)
-
:only-child p:only-child(only只有一個 child子元素)(只有一個子元素,這里只有一個那么那一個也只能是p了)
效果
測試html:
<div> <span>span</span> <p>p1</p> <p>p2</p> <p>p3</p> </div> <div> <p>p1</p> <span>span</span> <p>p2</p> <p>p3</p> </div> <div> <p>p1</p> <p>p2</p> <p>p3</p> <span>span</span> </div>p:first-child
/*屬於其父元素的首個子元素的每個 <p> 元素*/ /*先找p元素 再找p的父元素下的第一個子元素為p的(first第一個 child子元素)(找第一個子元素為p)*/ p:first-child { background-color: yellow; }
p:last-child
/*屬於其父元素的最后一個子元素的 p 元素*/ /*先找p元素 再找p的父元素下的倒數第一個子元素為p的元素 (last倒數 child子元素)(找倒數第一個子元素為p)*/ p:last-child { background-color: yellow; }
p:first-of-type
/*指定父元素的首個 p 元素*/ /*先找p元素 再找p的父元素下的第一個p元素(first第一個 type類型)(找第一個p)*/ p:first-of-type { background: #ff0000; }
p:last-of-type
/*指定父元素的最后一個 p 元素*/ /*先找p元素 再找p的父元素下的倒數第一個p元素(last倒數 type類型)(找倒數第一個p)*/ p:last-of-type { background: #ff0000; }
p:nth-child(2)
/*規定屬於其父元素的第二個子元素的每個 p 的背景色：*/ /*先找p元素 再找p的父元素下的第二個子元素為p(2第二個 child子元素)(找第二個子元素為p)*/ p:nth-child(2) { background: #ff0000; }
p:nth-last-child(2)
/*規定屬於其父元素的第二個子元素的每個 p 元素，從最后一個子元素開始計數：*/ /*先找p元素 再找p的父元素下的倒數第二個子元素為p (last倒數 2第二個 child子元素)(找倒數第二個子元素為p)*/ p:nth-last-child(2) { background: #ff0000; }
p:nth-of-type(2)
/*規定屬於其父元素的第二個 p 元素的每個 p：*/ /*先找p元素 再找p的父元素下的第二個p元素(2第二個 type類型)(找第二個p)*/ p:nth-of-type(2) { background: #ff0000; }
p:nth-last-of-type(2)
/*規定屬於其父元素的第二個 p 元素的每個 p，從最后一個子元素開始計數：*/ /*先找p元素 再找p的父元素下的倒數第二個p元素(last倒數 2第二個 type類型)(找倒數第二個p)*/ p:nth-last-of-type(2) { background: #ff0000; }vi設計http://www.maiqicn.com 辦公資源網站大全https://www.wode007.com
span:only-of-type
/*指定屬於父元素的特定類型的唯一子元素的每個 p 元素*/ /*先找span 再找span的父元素下只有一個類型為span的元素 (only只有一個 type類型)(只有一個類型為span的)*/ span:only-of-type { background: #ff0000; }
p:only-child
/*規定屬於其父元素的唯一子元素的每個 p 元素：*/ /*先找p 再找p的父元素下只有一個子元素 (only只有一個 child子元素)(只有一個子元素,這是只有一個那么那一個也只能是p了)*/ p:only-child { background: #ff0000; }