开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >css选择器："body h1“、"body.h1”和“body.h1”的区别

问css选择器："body h1“、"body.h1”和“body.h1”的区别
EN

Stack Overflow用户

提问于 2013-11-12 14:07:47

回答 5查看 10.5K关注 0票数 5

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

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

我懂body.h1，但不懂body h1和body .h1

twitter-bootstrap

EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2013-11-12 14:12:14

body h1将处理<body>-element中的所有<h1>-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.h1 )时，<body>-element本身的样式将由h1来确定。

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

票数 8

EN

Stack Overflow用户

发布于 2013-11-12 14:09:26

如果body.h1有一个h1类，那么它将选择h1元素。
- (例如<body class='h1'>this one</body>)

body h1将选择正文中的所有h1元素。
- (例如<body><h1>this one</h1></body>)
- 这在格式良好的HTML中是多余的，它基本上将与h1做同样的事情，因为h1元素的唯一位置可以是(如果您的h1格式良好)在正文中)。

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>

票数 7

EN

Stack Overflow用户

发布于 2013-11-12 14:09:34

body.h1使用h1类选择body。
body h1选择body元素中任何位置的所有h1元素。
body .h1选择在body元素中具有类h1的任何类型的所有元素。

您的CSS中的选择器针对的是所有h1元素和所有类型的元素，这些元素的类h1位于标记的body中。

票数 0

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/19931351

复制

相似问题