这让我疯狂:
HTML:
<div><h1>Hello World!</h1></div>
Run Code Online (Sandbox Code Playgroud)
CSS:
*:not(div) h1 { color: #900; }
Run Code Online (Sandbox Code Playgroud)
这不是读",选择所有h1具有祖先不是div元素的元素......?" 因此,"你好世界!" 不应该是红色的,但它仍然是.
对于上面的标记,添加子组合器有效:
*:not(div) > h1 { color: #900; }
Run Code Online (Sandbox Code Playgroud)
但h1如果元素不是元素的子元素,则不会影响div元素.例如:
<div><article><h1>Hello World!</h1></article></div>
Run Code Online (Sandbox Code Playgroud)
这就是为什么我想将h1元素表示为元素的后代而不是子div元素.任何人?
显然,正如我在评论另一个答案时发现的那样,jQuery(而不是它的底层选择器引擎Sizzle)允许你将参数引用到:not()选择器和:has()选择器.即:
$('div:not("span")')
$('span:has("span")')
Run Code Online (Sandbox Code Playgroud)
在Selectors标准中,引号始终代表字符串,而不是选择器或关键字,因此引用参数:not()始终无效.这在选择器4中不会改变.
您还可以通过添加不受支持的CSS选择:nth-last-child(1) 器来查看它是非标准语法,例如导致选择器完全失败:
$('div:not("span"):nth-last-child(1)')
$('span:has("span"):nth-last-child(1)')
Run Code Online (Sandbox Code Playgroud)
在这里允许报价是否有任何理由,技术或其他方面?想到的唯一可能性是:
一致性:contains()允许引用和不引用的参数,如旧的选择器规范中所示.除了:contains()接受字符串/关键字,而不是选择器...
与自定义伪使用的实现保持一致$.expr[':'],始终允许引用和不引用的参数.
一致性和易用性移植到他们的方法同行.not()和.has()(只是删除或拆分外报价和改变冒号期?).
但我找不到任何支持或反对它们的消息来源.实际上,引用选择器参数本身的能力也没有在任何地方记录,引用和引用参数之间似乎没有任何区别:
$('div:not(span)')
$('span:has(span)')
Run Code Online (Sandbox Code Playgroud) 十分钟前问过这个问题,但意识到我用的是父母而不是祖先.我正在寻找一个具有特定祖先的类的东西.
如何选择没有特定类父级的所有输入?
在这里,我只想获得没有父类与非父类的输入
$(document).ready(function() {
$("div:not(.not-ancestor) > input[type='text']").css('color', '#FF1200');
});?
Run Code Online (Sandbox Code Playgroud)
谢谢!