Question

是否可以选择property=B后代为typeof="A"的所有元素，而不是typeof中任何其他typeof="A"的后代？但这应该是一个基本的选择器，而不是带有.find()等的复杂jQuery链。

<div typeof="Y">
    <div property="B"></div>
    <div typeof="A">
        <sometags>
            <div property="B"></div> <--- this should match
        </sometags>
        <div typeof="X">
            <div property="B"></div>
        </div>
        <div property="B"></div> <--- this should match
    </div>
</div>

Answer 1

如果您对jQuery选择器很好，请尝试

jQuery('[typeof="A"] [property]:not([typeof="A"] [typeof] *)')

演示：Fiddle

Answer 2

您需要not选择器。如果你将“后代”和“直接孩子”案件分成单独的选择器，我也认为这是最清楚的。这是一个有效的例子：

/* For demo purposes. */
div { border: 1px solid gray; padding: 5px; margin: 5px; }

div[typeof="A"] *:not([typeof]) div[property="B"],
div[typeof="A"] > div[property="B"] {
    color: red;
    background-color: pink;
}

<div typeof="Y">
    <div property="B"></div>
    <div typeof="A">
        <sometags>
            <div property="B">this should match</div>
        </sometags>
        <div typeof="X">
            <div property="B">NO match</div>
        </div>
        <div property="B">this should match</div>
    </div>
</div>

缺点是这会使用*选择器，这可能会导致性能下降。

另一个缺点可能是它使用CSS3选择器，我不确定exact browser support，特别是IE8。

Answer 3

试试这个fiddle，匹配type="A"的后代以选择property=B

div[typeof="A"] > div[property="B"]{
    color: red;
}

CSS或jQuery选择器匹配所有不是其他元素后代的后代

3 个答案: