V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
xiawenhao
V2EX  ›  问与答

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

  •  
  •   xiawenhao · 2019-04-24 09:28:06 +08:00 · 4620 次点击
    这是一个创建于 1801 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    <html>
        <h1></h1>
        <p></p>
        <P></P>
        <p></p>
    </html>
    
    
    21 条回复    2019-04-24 15:22:30 +08:00
    EridanusSora
        1
    EridanusSora  
       2019-04-24 09:30:04 +08:00 via Android
    h1>p
    EridanusSora
        2
    EridanusSora  
       2019-04-24 09:30:45 +08:00 via Android
    不好意思看错题了,无视。。
    leefly
        3
    leefly  
       2019-04-24 09:32:39 +08:00
    h1 + p
    HuasLeung
        4
    HuasLeung  
       2019-04-24 09:32:55 +08:00   ❤️ 1
    ````
    p:first-of-type {
    //
    }
    ````
    EridanusSora
        5
    EridanusSora  
       2019-04-24 09:33:01 +08:00 via Android
    应该是 h1 + p
    GiRLIn11
        6
    GiRLIn11  
       2019-04-24 09:33:07 +08:00 via Android
    用相邻兄弟选择器,h1 + p。建议你补下 CSS 基础知识。
    Sapp
        7
    Sapp  
       2019-04-24 10:00:06 +08:00
    @HuasLeung 你这选择的是整个文本第一个 p,而不是 h1 后面第一个,应该是 + 才是对的
    HuasLeung
        8
    HuasLeung  
       2019-04-24 10:13:16 +08:00
    @Sapp lz 给的代码只有这么一段,按你的思路,你又怎么知道 h1 就是整个文本的第一个 h1 ?
    Sapp
        9
    Sapp  
       2019-04-24 10:15:01 +08:00
    @HuasLeung 杠起来真得劲儿,人都明显的说了 h1 之后的第一个 p,都是猜,你为什么就不能注意点 h1 之后这个条件?
    HuasLeung
        10
    HuasLeung  
       2019-04-24 10:15:56 +08:00
    @Sapp 语气没问题吧,不是杠……
    zqx
        11
    zqx  
       2019-04-24 10:33:29 +08:00 via Android
    h1+p 选择的是所有 h1 后面的第一个 p,即使有多个 h1 也没问题
    HuasLeung
        12
    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
        13
    whitegerry  
       2019-04-24 10:52:00 +08:00
    @HuasLeung lz 题目里的 html 没看到么?
    FakeLeung
        14
    FakeLeung  
       2019-04-24 11:14:58 +08:00
    所以说,题目有问题。
    HuasLeung
        15
    HuasLeung  
       2019-04-24 11:38:19 +08:00
    @whitegerry 看到了,有什么问题么?
    4ark
        16
    4ark  
       2019-04-24 11:47:28 +08:00 via Android
    没有 class 的吗?
    ayase252
        17
    ayase252  
       2019-04-24 11:56:21 +08:00 via iPhone
    标题说的题目和内容说的题目不是一回事啊
    iblessyou
        18
    iblessyou  
       2019-04-24 13:28:23 +08:00
    @HuasLeung
    我觉得你别理那些人了,
    题目问的也有问题,“文章结构”到底是指 HTML,还是 HTML 内的一个区域,
    看起来是区域,不过举的例子又加俩 HTML 标签不知道什么意思,那不就是整个 HTML 了。

    还有,那个“例如”。。。说明这例子是随手写的,不是他的代码结构,那 h1 也是随手写的。。。有毛的讨论价值
    ayson23
        19
    ayson23  
       2019-04-24 13:47:07 +08:00
    这种元素选择器都是基础,W3C 或者菜鸟教程都可以学到,这类型的多去尝试对比几次就会用了
    shintendo
        20
    shintendo  
       2019-04-24 13:50:32 +08:00
    @Sapp
    人家也没杠,楼主题目本来就不严谨,各自有各自的理解,你也说了都是猜。
    以例子为准,两个写法都对,以“ h1 之后的第一个 p ”这句话为准, 两个写法都错,谁知道 h1 和 p 直接有没有隔着什么
    DOLLOR
        21
    DOLLOR  
       2019-04-24 15:22:30 +08:00
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2822 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 14:57 · PVG 22:57 · LAX 07:57 · JFK 10:57
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.