css怎么选择父元素下的某个元素？__css选择第二个元素

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

叛逆的镜子 · 斗罗：从武魂殿开始建造神国_(蒹葭渡江)小说 ...· 2 周前 ·

帅呆的弓箭 · 【Nginx】面试官问我Nginx如何配置W ...· 7 月前 ·

满身肌肉的炒饭 · 南阳市涉企违规收费专项整治政策解读_政策解读 ...· 10 月前 ·

豪爽的烈马 · Java扩展Nginx之七：共享内存 - ...· 1 年前 ·

一身肌肉的钥匙扣 · Python对文本进行分句_python ...· 1 年前 ·

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;
}

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;
}