V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
BUappend
V2EX  ›  CSS

nth-child

  •  
  •   BUappend · 2020-03-10 04:17:59 +08:00 · 1848 次点击
    这是一个创建于 1714 天前的主题,其中的信息可能已经有所发展或是发生改变。
    <style> .box1{ height: 500px; width: 500px; background-color: antiquewhite; display: flex; } .box1-1{ height: 100%; flex:3; } .box1-2{ height: 100%; flex:3; } .box1-3{ height: 100%; flex:4; } .box1 :nth-child(1){ background-color: blueviolet; } .box1 :nth-child(2){ width: 50px; height: 50px; } </style>
    <div class="box1">
        <div class="box1-1">
            <div></div>
            <div class="box4" style="background-color: brown;"></div>
        </div>
        <div class="box1-2"></div>
        <div class="box1-3"></div>
    </div>
    
    
    这样写,为什么 box4 会变成 width:50px  height:50px????
    
    8 条回复    2020-03-10 14:44:31 +08:00
    Perry
        1
    Perry  
       2020-03-10 05:32:48 +08:00   ❤️ 2
    .box1:nth-child(2) 和 .box1 :nth-child(2) 意义不同,后者是 .box1 的每个 child X 的 X:nth-child(2)
    FragmentLs
        2
    FragmentLs  
       2020-03-10 07:30:15 +08:00
    ~~~~
    div p {
    color: red;
    }
    ~~~~

    ~~~~
    <div>
    <p>One</p>

    <ul>
    <li>
    <p>Two</p>
    <p>Two</p>
    </li>
    </ul>

    <div>
    <p>Three</p>
    </div>

    </div>
    ~~~~

    同理
    Sivan
        3
    Sivan  
       2020-03-10 10:08:44 +08:00
    `.box1 :nth-child(2)` => `.box1 > div:nth-child(2)`
    BUappend
        4
    BUappend  
    OP
       2020-03-10 14:17:46 +08:00
    @Perry 谢谢 是不是 nth-child 只是用来选择有相同的 class 的元素比较好用啊?直接就 .clsss:nth-child(X) 了,但是如果选择某个父元素下第几个子元素是不是就不太行了呢
    BUappend
        5
    BUappend  
    OP
       2020-03-10 14:27:16 +08:00
    @Perry 对 可以这样 .class>div:nth-child(X) 选择某个 class 下的第 X 个 div
    BUappend
        6
    BUappend  
    OP
       2020-03-10 14:28:01 +08:00
    @Sivan 谢谢
    BUappend
        7
    BUappend  
    OP
       2020-03-10 14:44:09 +08:00
    @Sivan 应该是 box1 :nth-child(2) => box1 div:nth-child(2)
    BUappend
        8
    BUappend  
    OP
       2020-03-10 14:44:31 +08:00
    @FragmentLs 谢谢
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1037 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 19:46 · PVG 03:46 · LAX 11:46 · JFK 14:46
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.