选择没有我孩子的锚

Question

是否可以选择哪个孩子不是i？

示例：

<a href="#"> <!--select this-->
   Link!
</a>

<a href="#"> <!--but not this-->
   <i class="material-icons">menu</i>
</a>

我尝试了a:not(>i)和a:empty，但它没有用。

Answer 1

定义2个样式。一个用于a，另一个用于a i。似乎没有别的办法，因为:not不允许组合。

https://jsfiddle.net/rnu83ogm/1/

a{
  color:red;
}
a i{
  color:blue;
}

或使用jQuery：

$("a:not(:has(>i))")

Answer 2

最不幸的是，它并非如此。 It's been proposed，但那是关于它的。 你需要一些js。

var links = document.querySelectorAll("a"),
i = 0, ii = links.length;
for (i; i,ii; i++) {
    if(!links[i].querySelector("i")){
        links[i].classList.add("without-i");
    }
}