代码之家 › 专栏 › 技术社区 › koko

:当在上面动态插入不同类的元素时,第一个子级失败

css-selectors pseudo-class css

koko · 技术社区 · 14 年前

所以,我遇到了这样一种情况:插入一个不同类/ID的元素会破坏所有关于该元素的CSS规则:第一个子元素。

<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; /* ... */ }

一旦我在上面插入另一个类/id的元素,如下所示:

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

.nsub:first child的所有声明都将在FF 3.6和Safari 4中被忽略。

编辑: 抱歉,如果我没有说清楚:上面插入的元素应该没有类名“.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 回复 | 直到 12 年前

PatrikAkerstrand 14 年前

这是因为类的第一个元素 nSub 不再是 first-child 这样,样式就不再匹配了。

如果动态插入的元素也具有类 NSUB ,则规则仍将匹配,并与新插入的元素(现在是第一个子元素)匹配。

我不是CSS3专家,但你可以试试 :nth-of-type 选择器:

.nSub:nth-of-type(1) {
   /* Rules for the first .nSub here */
}

Fidi 14 年前

这是因为,我想您没有为这个插入的元素设置类…

在CSS文件中,您会说“.nsub:first child”,但您要插入的元素不属于该类:

如果将class属性添加到该元素中,可能会有所帮助:

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

zykadelic 12 年前

帕特里卡克尔斯特拉德所说的规则不再匹配是正确的。: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.images,如下所示

<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不支持此功能。