CSS 选择器："body h1"、"body .h1"和"body.h1"之间的区别

我试图了解这个css规则将应用于哪些元素：

body h1, body .h1 {
    font-family: 'Open Sans', sans-serif !important;
    color: inherit;
    text-rendering: optimizelegibility;
}

我理解body.h1但不了解body h1，也不了解body .h1

body h1将处理<body>元素内的所有<h1>元素：

<body>
    <h1>This one</h1>
    <div>
        <h1>And also this one</h1>
    </div>
</body>

body .h1 将选择主体内具有类h1的所有元素：

<body>
    <h1 class="h1">This one</h1>
    <div class="h1">And also this one</div>
</body>

最后，body.h1 将设置<body>元素本身的样式，当具有类h1时：

<body class="h1"></body>

body.h1 将选择 body 元素（如果它具有 h1 类。
- （例如。 <body class='h1'>this one</body> ）
body h1将选择正文中的所有h1元素。
- （例如。 <body><h1>this one</h1></body> ）
- 这在格式良好的 HTML 中是多余的，它基本上会做与 h1 相同的事情，因为 h1 元素唯一可以的地方（如果您的 HTML 格式正确）是在正文中）
body .h1将选择正文中具有h1类的所有元素。
- （例如。 <body><div class='h1'>this one</div></body> ）

因此，body h1, body .h1将选择：

<body>
    <h1>this element</h1>
    <div class='h1'>and this one too</div>
</body>

CSS 中的选择器面向标记body内的所有h1元素和任何类型的所有元素，这些元素具有类h1。

正文 h1

它会找到你体内所有的H1

车身 .h1

它会找到您体内所有 H1 类的元素

body h1：

作为body元素后代的所有h1元素

body .h1：具有类的所有元素h1是body元素的后代

小提琴： http://jsfiddle.net/P2z5x/

相关内容