html - css 选择器：“body h1”、“body .h1”和“body.h1”之间的区别

Question

我试图了解此 CSS 规则将应用于哪些元素：

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

我了解body.h1但body h1不了解body .h1

score 8 · Accepted Answer

body h1将处理<h1>-element 内的所有<body>-elements：

<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.h1finally 将样式<body>- 元素本身，当有一个类时h1：

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

score 7 · Accepted Answer

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

score 0 · Accepted Answer

CSS 中的选择器针对标记内部的h1所有元素和任何类型的所有元素。h1body

score 0 · Accepted Answer

身体 h1

它会在你的身体里找到所有的h1

身体.h1

它会在你的身体中找到所有具有 h1 类的元素

score 0 · Accepted Answer

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

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

5 回答 5