Question

我需要选择除第一个元素之外的元素的所有子元素。我正在使用drupal和colorbox模块，我不能单独向第一个元素添加唯一的类或ID。

<span> 
<span> 
<a> </a> <a> <img> </a>
<a> <img> </a>
<a> <img> </a>
</span> 
</span>

我有这种结构可以有更多<a> <img> </a>，但你明白了。

简而言之。我需要选择标记<a> <img> </a>中的所有图片标记，以便我可以对其应用CSS规则，而不会影响第一个<a>标记。也许这有一个Jquery解决方案？谢谢

Answer 1

使用:not(:first-child)排除第一个链接

.myClass img {
  content: url('http://kenwheeler.github.io/slick/img/lazyfonz2.png');
}

.myClass a:not(:first-child) img {
  content: url('http://kenwheeler.github.io/slick/img/lazyfonz3.png');
}

<span> 
<span class="myClass"> 
<a> <img> </a>
<a> <img> </a>
<a> <img> </a>
</span> 
</span>

在jquery中它基本上是一样的。

$('a:not(:first-child)').css('background','red');

a {
  height: 1em;
  width: 1em;
  background: black;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span> 
<span> 
<a> <img> </a>
<a> <img> </a>
<a> <img> </a>
</span> 
</span>

Answer 2

你可以使用这个$("span>a").not(":eq(0)")

$("span>a").not(":eq(0)").css('background','red');

.myClass a {
  width: 100px; height: 100px;
  background: black;
  display: block;
}
.myClass a:not(:first-child) {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<span> 
<span> 
<a> dsada</a> <a> <img> </a>
<a>dsada <img> </a>
<a> dsada<img> </a>
</span> 
</span>

选择除第一个元素之外的所有子元素

2 个答案: