css 选择器如何选择文章结构中的第一个 <p> 元素

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2033 天前的主题，其中的信息可能已经有所发展或是发生改变。

例如 html 结构是下面这样的，css 中有方法只选择 <h1> 元素后面的出现的第一个 <p> 元素吗？

<html>
    <h1></h1>
    <p></p>
    <P></P>
    <p></p>
</html>

HTML

CSS

元素

结构

21 条回复 • 2019-04-24 15:22:30 +08:00

EridanusSora

2019-04-24 09:30:04 +08:00 via Android

h1>p

EridanusSora

2019-04-24 09:30:45 +08:00 via Android

不好意思看错题了，无视。。

leefly

2019-04-24 09:32:39 +08:00

h1 + p

HuasLeung

2019-04-24 09:32:55 +08:00

````
p:first-of-type {
//
}
````

EridanusSora

2019-04-24 09:33:01 +08:00 via Android

应该是 h1 + p

GiRLIn11

2019-04-24 09:33:07 +08:00 via Android

用相邻兄弟选择器，h1 + p。建议你补下 CSS 基础知识。

Sapp

2019-04-24 10:00:06 +08:00

@HuasLeung 你这选择的是整个文本第一个 p，而不是 h1 后面第一个，应该是 + 才是对的

HuasLeung

2019-04-24 10:13:16 +08:00

@Sapp lz 给的代码只有这么一段，按你的思路，你又怎么知道 h1 就是整个文本的第一个 h1 ？

Sapp

2019-04-24 10:15:01 +08:00

@HuasLeung 杠起来真得劲儿，人都明显的说了 h1 之后的第一个 p，都是猜，你为什么就不能注意点 h1 之后这个条件？

HuasLeung

2019-04-24 10:15:56 +08:00

@Sapp 语气没问题吧，不是杠……

zqx

2019-04-24 10:33:29 +08:00 via Android

h1+p 选择的是所有 h1 后面的第一个 p，即使有多个 h1 也没问题

HuasLeung

2019-04-24 10:48:41 +08:00

@Sapp
@zqx
举个简单的例子
````
<html>
<h1></h1>
<p></p>
<h1></h1>
<p></p>
<P></P>
<p></p>
</html>
````
h1+p 会波及第二个 p，你们确定的相邻选择器能满足 lz 的题目要求？

whitegerry

2019-04-24 10:52:00 +08:00

@HuasLeung lz 题目里的 html 没看到么？

FakeLeung

2019-04-24 11:14:58 +08:00

所以说，题目有问题。

HuasLeung

2019-04-24 11:38:19 +08:00

@whitegerry 看到了，有什么问题么？

4ark

2019-04-24 11:47:28 +08:00 via Android

没有 class 的吗？

ayase252

2019-04-24 11:56:21 +08:00 via iPhone

标题说的题目和内容说的题目不是一回事啊

iblessyou

2019-04-24 13:28:23 +08:00

@HuasLeung
我觉得你别理那些人了，
题目问的也有问题，“文章结构”到底是指 HTML，还是 HTML 内的一个区域，
看起来是区域，不过举的例子又加俩 HTML 标签不知道什么意思，那不就是整个 HTML 了。

还有，那个“例如”。。。说明这例子是随手写的，不是他的代码结构，那 h1 也是随手写的。。。有毛的讨论价值

ayson23

2019-04-24 13:47:07 +08:00

这种元素选择器都是基础，W3C 或者菜鸟教程都可以学到，这类型的多去尝试对比几次就会用了

shintendo

2019-04-24 13:50:32 +08:00

@Sapp
人家也没杠，楼主题目本来就不严谨，各自有各自的理解，你也说了都是猜。
以例子为准，两个写法都对，以“ h1 之后的第一个 p ”这句话为准，两个写法都错，谁知道 h1 和 p 直接有没有隔着什么

DOLLOR

2019-04-24 15:22:30 +08:00

https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type