gpt4 book ai didi

css - 第 n 个类型的问题。我一定是误解了它是如何工作的

转载 作者:行者123 更新时间:2023-11-28 12:35:19 25 4
gpt4 key购买 nike

这是我试图解决(或简单理解)的问题的代码笔:http://codepen.io/jhogue/pen/wtLiD

基本上,我有一组 float 的列。我想用 nth-of-type清除开始新行的列。在这种情况下,每三分之一 .column从第四个开始。我是这样理解的(3n+4)上类。

我还需要一个标题,即第一个 div元素。尽管我认为 nth-of-type将仅适用于我将其应用到的元素——在本例中,类为 .column 的元素– 它显然是在计算容器中的第一个元素。

nth-of-type也是如此只是不能这样工作?我对它如何工作的理解不正确吗?

一目了然nth-of-type应该做,而不是 nth-child : http://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/

最佳答案

您只需要发挥更多创意。您可能不需要 div 中的标题和段落;但如果你确实需要一个包装器,你可以使用 <header>相反:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

div:nth-of-type(3n+4) {
color: red;
}

</style>
</head>
<body>

<div class="container">
<header>
<h1>Testing nth-of-type.</h1>
<p>Thought it would skip this div element.</p>
</header>
<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
<div class="column">Column 4. Want this one. </div>
<div class="column">Column 5</div>
<div class="column">Column 6</div>
<div class="column">Column 7. Want this one. </div>
<div class="column">Column 8</div>
</div>

</body>
</html>

关于css - 第 n 个类型的问题。我一定是误解了它是如何工作的,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17980814/

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