CSS：选择只有一个父匹配属性选择器的元素

Question

我对编码有点菜鸟，如果这是一个愚蠢的问题，抱歉，但是我正在尝试编写一个通用刮板，以使用“ schema.org/Product”HTML微数据获取一些产品数据。

但是，在测试（on this page in particular where the name was being set as "Electronics" from the Breadcrumbs schema）时，我遇到了一个问题，因为存在具有不同项类型/模式的父元素。

我首先声明了此变量，以使用产品架构微数据检查页面是否具有元素。

var productMicrodata = document.querySelector('[itemscope][itemtype="https://schema.org/Product"], [itemscope][itemtype="http://schema.org/Product"]');

然后，我想为所有具有itemprop属性的元素进行选择。例如

productMicrodata.querySelectorAll('[itemprop]');

然而，问题是我想忽略任何具有不同项类型/模式的元素作为父元素，因为在这种情况下，仍然包括面包屑和ListItem模式数据。

我想我以后就可以做这样的事情：

productMicrodata.querySelectorAll(':not([itemscope]) [itemprop]');

但是，对于具有父元素具有不同itemscope属性（例如面包屑）的子元素，这仍将返回匹配项。

我确定我只是缺少一些非常明显的东西，但是对我如何仅选择仅具有itemtype="http://schema.org/Product"属性的元素的任何帮助，将不胜感激。

Answer 1

:not([itemscope]) [itemprop]表示：

具有itemprop属性的元素和没有任何C0]祖先的元素。

所以：

itemprop
…之所以匹配，是因为尽管父元素具有属性，但祖父母没有。

您需要使用子组合器

消除具有匹配的parent元素的元素：

<div>
    <div itemprop>
        <div itemprop> <!-- this one -->
        </div>
    </div>
</div>

Answer 2

[...]帮助我如何实现仅选择仅具有元素的元素:not([itemscope]) > [itemprop] 属性会很多赞赏。