Селектор CSS исключает первый дочерний элемент, затем следует n-й дочерний шаблон
Не уверен, почему это не работает:
:not(first-child):nth-child(3n+2){
margin-left: 30px;
margin-right:30px;
}
Он проходит через шаблон 3n + 2, я хочу исключить из этого шаблона первого ребенка, возможно ли это?
это работает, но это 4 строки кода. Я хотел бы сократить код этого фрагмента:
:nth-child(3n+2){
margin-right:30px;
}
:nth-child(3n+4){
margin-left: 30px;
}
Разве nth-child(3n+2)уже не исключает первого ребенка?
@Paulie_D внутри этого счетчика все еще включает первого ребенка nth-child(3n+2), как это исключить? Я хочу начать считать этот nth-child (3n + 2) от второго дочернего элемента, почему я попытался поставить :not(first-child)
Я действительно не понимаю, что вы пытаетесь сделать. Вот почему нам нужна демонстрация проблемы.
@Paulie_D, я не думаю, что ему нужен пример, я добавлю еще кое-что, дайте мне знать, если это имеет смысл
Вы также должны добавить свой HTML-код.
Ответы 2
Вам нужно использовать двоеточие (:) перед первым ребенком, поэтому оно должно быть -
:not(:first-child):nth-child(3n+2){
margin-left: 30px;
margin-right:30px;
}
См. Следующий фрагмент кода.
span {
color: white;
float: left;
margin: 10px;
padding: 10px;
background-color: black;
}
span:not(:first-child):nth-child(3n+1) {
background-color: red;
}
span:nth-child(3n+2) {
background-color: blue;
}
span:nth-child(3n+3) {
background-color: green;
}<html>
<head>
</head>
<body>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
</body>
</html>не могли бы вы опубликовать фрагмент кода, показывающий, что он работает для вас, а не для меня
@ user9013856 Я добавил фрагмент кода в свой ответ для вашей справки. Обратите внимание, что (3n + 2) -й ребенок или (3n + 3) -й ребенок никогда не может быть первым ребенком, поэтому применение ": not (: first-child)" для обоих этих случаев не даст никакого эффекта.
проверьте это решение здесь, я добавляю CSS, исключая 1-й элемент, которому вы можете следовать этому шаблону. Internet Explorer 8 и более ранние версии не поддерживают селектор: nth-child ().
p:nth-child(1n+2) {
background: red;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>The first.</p>
<p>The second.</p>
<p>The third.</p>
<p>The fourth .</p>
</body>
</html>
Вопросы, требующие помощи по коду, должны включать кратчайший код, необходимый для его воспроизведения в самом вопросе, предпочтительно в Фрагмент стека. См. Как создать минимальный, полный и проверяемый пример