gpt4 book ai didi

CSS - 将相邻选择器与 nth-of-type 结合使用

转载 作者:行者123 更新时间:2023-11-28 12:21:24 26 4
gpt4 key购买 nike

我想做的是选择标题标记后的每四个 DIV。这是我正在使用的代码的基本概念。

<div class="view-content"> 

<h3>The Heading</h3>
<div></div>
<div></div>
<div></div>
<div>Trying to select this DIV</div>

<h3>The Heading</h3>
<div></div>
<div></div>
<div></div>

<h3>The Heading</h3>
<div></div>
<div></div>
<div></div>
<div>Trying to select this DIV</div>
<div></div>
<div></div>
<div></div>
<div>Trying to select this DIV</div>

</div><!-- .view-content -->

我使用的是 Drupal,所以我仅限于编写 CSS 来安排内容。我试图选择每四个 DIV 的原因是因为一行有四个 DIV,我想从一行的第四个(也是最后一个)DIV 中删除右边距。有些行只有一个或两个 DIV,而其他行有十个或更多。

我最初编写的 CSS(似乎不起作用)是:

div.view-content h3 + div:nth-of-type(4n) {
margin-right: 0px;
}

可能是我想多了,也可能是没有办法。不管怎样,请帮忙!

最佳答案

不幸的是,它出现了there's no nice, general way to do this with CSS3 .从此处发布的其他答案中汲取灵感,您可以将其用于有限数量的元素:

div.view-content h3 + div+div+div+div,
div.view-content h3 + div+div+div+div + div+div+div+div,
div.view-content h3 + div+div+div+div + div+div+div+div + div+div+div+div /*etc*/ {
margin-right: 0px;
}

http://cssdesk.com/Ty7Gf

关于CSS - 将相邻选择器与 nth-of-type 结合使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13905813/

26 4 0
文章推荐: javascript - Moment.JS - 使用 moment 将两位数值更改为毫秒
文章推荐: javascript - 元素在移动设备上显示时不会居中,背景不会固定
文章推荐: javascript - keyup 事件处理程序更改焦点不适用于快速打字
文章推荐: jquery - 兼容的