5

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

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

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

4

5 回答 5

8

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>
于 2013-11-12T14:12:14.693 回答
7
  • 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>
于 2013-11-12T14:09:26.890 回答
0
  • body.h1选择body的类h1。
  • body h1选择h1元素内任意位置的所有元素body。
  • body .h1选择元素内具有类的任何类型的所有h1元素body。

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

于 2013-11-12T14:09:34.453 回答
0

身体 h1

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

身体.h1

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

于 2013-11-12T14:09:43.530 回答
0

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

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

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

于 2013-11-12T14:10:26.930 回答