CSS nth-child和类 [英] css nth-child and classes

问题描述

css第n个子选择器出现问题. 我在容器内有一个3x3元素的网格.这些元素具有称为.square的类. 使用.square:nth-child(3n+1)，选择该行的每个第一个元素，并将其着色为绿色. 使用.square:nth-child(3n+3)，选择该行的每个最后一个元素，并将其涂成红色.

I've got a problem with the css nth-child selector. I have a grid of 3x3 elemtens inside a container. Those elements have a class called .square. With .square:nth-child(3n+1) I select every first element of the row and color it green. With .square:nth-child(3n+3) I select every last element of the row and color it red.

这很好，直到在网格之前输出任何元素(例如，<br>)为止.对于每个新的<br>，订单都会上移一个，因为<br>被认为是.square.

This works fine, until there is any element(<br> for example) that is outputted before the grid. With every new <br>, the order moves up by one, as is the <br> was considered a .square.

据我了解.nth-child，它应该选择.square类的每三个元素.为什么将它应用于任何元素，我如何实现我的初始目标?

As I understand the .nth-child, it should select every third element of the .square class. Why does it apply that to any element, and how can I achieve my inital goal?

预先感谢

http://www.hier-krieg-ich- alles.de/shop.php?cat=26491127728

问题出现在中间的盒子上.

The problem occurs on the boxes in the middle.

推荐答案

您想要的声音

Sounds like you want nth-of-type.

您可能会发现有用的相关选择器是:first-of-type，:last-of-type，:nth-last-of-type和:only-of-type.

Related selectors which you may find useful are :first-of-type, :last-of-type, :nth-last-of-type and :only-of-type.

这篇关于CSS nth-child和类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！