组合:not()和:first-child()选择器

Question

我正在寻找一种结合两个css选择器的方法.就我而言,':not'和':first-of-type'.这是我的代码:

<div id="holder">
  <div class="image mobileOnly">...</div>
  <div class="image">...</div>
  <div class="image">...</div>
  <div class="image">...</div>
  <!-- ... more images ... -->
</div>

我想选择第一个不包含'mobileOnly'类的div.image.

我尝试了以下组合(以不同的顺序):

#holder .image:not(.mobileOnly):first-of-type {
  border: 5px solid #0a85d4;
}

#holder .image:not(.mobileOnly) :first-of-type {
  border: 5px solid #0a85d4;
}

这有可能吗？

Answer 1

这是一个棘手的问题:我不认为有一个简单的方法来实现:)

据我了解:你试图选择第一个.image元素,只要它不是一个.mobileOnly元素？

#holder .image:first-child {
  border: 5px solid #0a85d4;
}
#holder .image.mobileOnly:first-child {
  border: none;
}
#holder .image.mobileOnly:first-child + .image {
  border: 5px solid #0a85d4;
}

实例:http://codepen.io/enguerranws/pen/wMWzBr

让我们解释一下:你试图选择第一个类型为.image的子节点,它作为类.onlyMobile>这不起作用,因为在你需要的情况下,.image它不是它的第一个类型的子节点.