Селектор CSS исключает сначала дочерний, а затем дочерний шаблон - PullRequest
Новая
       1

Селектор CSS исключает сначала дочерний, а затем дочерний шаблон

0 голосов
/ 18 октября 2018

Не уверен, почему это не работает: 

: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;
}

Ответы [ 2 ]

0 голосов
/ 18 октября 2018

проверьте это решение здесь. Я добавляю 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>
0 голосов
/ 18 октября 2018

Вам необходимо использовать двоеточие (:) перед первым ребенком, поэтому оно должно быть - 

: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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...