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:
span
p1
p2
p3
p1
span
p2
p3
p1
p2
p3
span
p:first-child
/*属于其⽗元素的⾸个⼦元素的每个
元素*/
/*先找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;}
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;}
因篇幅问题不能全部显示,请点此查看更多更全内容