Question

我希望以下选择器仅匹配<span>的直接子项而不是'.grand-grand-child'的后代的'.grand-grand-parent'元素：

:not(.grand-grand-parent) .grand-grand-child > span { 
  color: blue; 
}

但它未能适用该规则。没有Javascript可以解决问题吗？根据我的经验，开头的:not规则必须遵循>符号的直接路径。我是对的吗？

Answer 1

请注意，这里存在一个问题：此选择器的第一部分将应用于第二个选择器的匹配祖先链中的任何元素（试图匹配整个规则）。请考虑以下事项：

＆＃13;

:not(.parent) .child {
  color: blue;
}

＆＃13;

<div class="parent">
  <div class="child">
      Which color am I?
  </div>
</div>

＆＃13;

答案是蓝色的，即使.child元素与.parent .child规则明显匹配。问题是，此规则读作

匹配任何元素与类＆＃39;孩子＆＃39;如果其中一个祖先没有上课＆＃39;父母＆＃39;

当然，它有一个祖先 - <body>元素。现在与这个片段进行比较：

＆＃13;

:not(.parent) > .child {
  color: blue;
}

＆＃13;

<div class="parent">
  <div class="child">
      Which color am I?
  </div>
</div>

＆＃13;

现在答案是黑色的，因为选择器显示为......

匹配任何元素与类＆＃39;孩子＆＃39;如果其直接父级没有班级＆＃39;家长＆＃39;

当浏览器开始支持CSS Selectors Level 4 negation spec时，将会打开另一种方式，允许超过simple selector :not作为.child:not(.parent *) { /* */ }参数。它可以写出类似的东西：

.child

现在，如果任何元素是.parent匹配{{1}}的祖先链，则它不匹配。但是，撰写本文时Chrome和Firefox仍然缺乏此功能的支持 - 它们仅支持CSS Level 3 negation。