: first-child завершается ошибкой, когда элемент другого класса динамически вставляется выше - PullRequest
Новая
       23

: first-child завершается ошибкой, когда элемент другого класса динамически вставляется выше

2 голосов
/ 18 июня 2010

Итак, я столкнулся с ситуацией, когда вставка элемента другого класса / идентификатора нарушает все css-правила для этого: first-child. 

<div id="nav">
    <div class="nSub">abcdef</div>
    <div class="nSub">abcdef</div>
    <div class="nSub">abcdef</div>
    <div class="nSub">abcdef</div>
    <div class="nSub">abcdef</div>
</div>


.nSub:first-child { margin-top:15px; -moz-border-radius-topleft:5px; /* ... */ }
.nSub             { background:#666; /* ... */ }
.nSub:last-child  { -moz-border-radius-bottomleft:5px; /* ... */ }

Как только я вставляю элементдругой класс / идентификатор выше, например: 

$('nav').insert({top:'<div id="newWF"></div>'});

все объявления для .nSub: first-child игнорируются как в FF 3.6, так и в Safari 4.

EDIT: извините, если я не сказал это ясно: элемент, вставленный выше, НЕ должен иметь имя класса ".nSub" 

<div id="nav">
    <div id="newWF"></div>
    <div class="nSub">abcdef</div> <!-- BROKEN CSS -->
    <div class="nSub">abcdef</div>
    <div class="nSub">abcdef</div>
    <div class="nSub">abcdef</div>
    <div class="nSub">abcdef</div>
</div>

Ответы [ 3 ]

2 голосов
/ 18 июня 2010

Это потому, что первый элемент с классом nSub больше не является first-child родительского элемента и, следовательно, стиль больше не соответствует.

Если динамически вставленный элемент также будет иметь класс nSub, тогда правило все равно будет совпадать и совпадать для вновь вставленного элемента (который теперь является первым дочерним).

Я не эксперт по CSS3, но вы можете попробовать селектор :nth-of-type: 

.nSub:nth-of-type(1) {
   /* Rules for the first .nSub here */
}
0 голосов
/ 19 марта 2011

То, что PatrikAkerstrand сказал о несоответствии правилу, является правильным.Псевдо: first-child (к сожалению) предназначается только для первого дочернего элемента его родителя, у которого также есть элемент / класс / что бы вы ни указали.

Я только полчаса ругался на то, почему следующее не будет работать

<div id="header">
  <a href="."><img src="path/file.png" /></a>
  <div class="img"></div>
  <div class="img"></div>
  <div class="img"></div>
</div>

#header .img {
  margin:0 25px;
}
#header .img:first-child,
#header .img:last-child {
  margin:0;
}

Я обнаружил, что решение заключалось в том, чтобы обернуть div.img в изображения div.i, как это 

<div id="header">
  <a href="."><img src="path/file.png" /></a>
  <div class="images">
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
  </div>
</div>

#header .images .img {
  margin:0 25px;
}
#header .images .img:first-child,
#header .images .img:last-child {
  margin:0;
}

Редактировать: Если вы неЕсли вы хотите добавить несемантическую разметку, вы можете использовать псевдокласс: first-of-type.Это, однако, не поддерживается в более ранних версиях IE.

0 голосов
/ 18 июня 2010

Это потому, что вы не устанавливаете класс для этого вставленного элемента, я думаю ...

В вашем CSS-файле вы говорите ".nSub: first-child", но вставляемый элемент не относится к этому классу: "

Может быть, это поможет, если вы добавите атрибут класса и к этому элементу: 

$('nav').insert({top:'<div id="newWF" class="nSub"></div>'});
...