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

2019-04-24 09:28:06 +08:00
 xiawenhao

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

<html>
    <h1></h1>
    <p></p>
    <P></P>
    <p></p>
</html>
4652 次点击
所在节点    问与答
21 条回复
EridanusSora
2019-04-24 09:30:04 +08:00
h1>p
EridanusSora
2019-04-24 09:30:45 +08:00
不好意思看错题了，无视。。
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
应该是 h1 + p
GiRLIn11
2019-04-24 09:33:07 +08:00
用相邻兄弟选择器，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
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
没有 class 的吗？
ayase252
2019-04-24 11:56:21 +08:00
标题说的题目和内容说的题目不是一回事啊
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 直接有没有隔着什么

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/558125

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX