jquery header 选择器不工作

Question

html...

<div>
    <h1>heading one</h1>
    <p>para one</p>
    <h2>heading two</h2>
    <p>para two</p>
    <h3>heading three</h3>
    <p>para three</p>
</div>

jquery...

$( ":header" ).css({ background: "#ccc", color: "blue" }); // this works 

但这些不是，为什么？

$( "div:header" ).css({ background: "#ccc", color: "blue" });

或

$("div").filter( ":header" ).css({ background: "#ccc", color: "blue" });

我想仅对特定 div 使用 :header 选择器。

Answer 1

您需要使用descendant selector/child selector

$( "div :header" ).css({ background: "#ccc", color: "blue" });

或find()

$("div").find( ":header" ).css({ background: "#ccc", color: "blue" });

因为 header 元素是 div 元素的后代。

当您使用 div:header 或 .filter() 时，它会搜索 div 元素，该元素也是一个 header 元素，它将永远不会是真的