gpt4 book ai didi

css - 理解一些第 n 个 child 的例子

转载 作者:太空宇宙 更新时间:2023-11-03 23:41:13 26 4
gpt4 key购买 nike

我正在学习 CSS,我正在用 nth-child 做一些实验。假设我有代码:

<html>
<head>
<style>
div p:nth-child(n+3)
{
color: red;
}
</style>
</head>

<body>
<div>
<h1>Title</h1>
<p> 1</p>
<p> 2</p>
<p> 3</p>
<p> 4</p>
<p> 5</p>
<p> 6</p>
<p> 7</p>
<p> 8</p>
</div>
</body>
</html>
  1. 为什么它从<p>2</p>开始为元素着色当我指定我希望它只计算 <p>元素(你能做到吗)?

  2. 假设我有另一个与另一个相同的元素 8 <p>其中的元素,我如何指定我只想要第 5 个 <p>第二元素<div>元素?

最佳答案

  1. <h1>共享相同的 <div>父级为 <p>元素(换句话说,<h1><p> 元素是彼此的 sibling )。这使得 <h1>第一个 child ,因此也是第一个<p>成为老二,老二<p>成为第三个 child (此时 :nth-child(n+3) 开始匹配元素),依此类推。

    对于标签名称不同的元素,可以使用:nth-of-type()相反:

    div p:nth-of-type(n+3) 
    {
    color: red;
    }
  2. 像这样:

    div:nth-child(2) p:nth-of-type(5) 
    {
    color: red;
    }

    同样,如果 <div> 中还有其他 sibling 元素,:nth-child()不会像你期望的那样工作。您可以随时将其替换为另一个 :nth-of-type()像这样:

    div:nth-of-type(2) p:nth-of-type(5) 
    {
    color: red;
    }

关于css - 理解一些第 n 个 child 的例子,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22812790/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com