CSS：选择器属性继承答案

【问题标题】：CSS: Selectors Property InheritanceCSS：选择器属性继承
【发布时间】：2015-05-10 10:19:54
【问题描述】：

我是 CSS 新手，所以我有一个问题：

拥有这个 html 文档：

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: #d0e4fe;
}

h1 {
    color: orange;
    text-align: center;
}

p {
    font-family: "Times New Roman";
    font-size: 20px;
}
</style>
</head>
<body>

<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>

</body>
</html>

h1 标签的 text 属性是继承自 style 类、继承自 h1 样式还是两者兼有？

【问题讨论】：

抱歉，不太明白您所说的 style class 和 h1 style 是什么意思。您是否在问是否在 <style> 标签或内联 style 属性中定义的属性优先？在本例中，h1 标记的内容将居中对齐并为橙色字体。
是的，我的意思是关于什么特征将具有来自 h1 的文本的规则，因为我没有指定 css 类，但是当我在 html 文档中查看它时，它需要该属性来自上面定义的 stykes 的 h1 选择器
是的，您不必总是定义一个类。您可以根据标签名称（如h1、p 等）或其id 或其class 设置标签/元素的样式。
但是在这种情况下，要考虑的属性的优先顺序是从样式开始，然后从标签开始？并且在样式中，您可以覆盖标签中的属性（例如：在 h1 处，您使字体大小变小了？）？
style 属性（内联样式）中提供的属性和值优先于所有其他 CSS 规则。有关完整的优先顺序，您可以查看this link。我搁置了写答案的想法，因为这是一个相当大的话题。

标签： html css tags

【解决方案1】：

进一步扩展 Harry 在 cmets 中所说的内容，有多种方法可以使用 CSS 为元素定义“样式”。

内联样式 - <h1 style="color:blue;">
外部样式表
内部样式表

在上述问题中，您使用的是内部样式表。这意味着您已将 <style> 标记添加到文档的头部，然后在其中添加样式。

还有几种方法可以使用这些方法中的任何一种来更改元素的样式。你可以：

使用 ID 选择器 (#) 为对象设置样式（参见示例 1）
使用类选择器 (.) 为对象设置样式（参见示例 2）
使用标签 (h1) 为对象设置样式（参见示例 3）

示例 1

#title { color:black; }
<h1 id ="title"> This is the title </h1>

在此示例中，您可以使用 ID 识别 H1 标记，从而允许使用散列键设置单个对象的样式。

示例 2

.title {color:black;} 
<h1 class="title"> This is the title </h1>

在此示例中，您可以识别一类对象或单个对象，您还可以将类定义为某个标签 {h1.title}，这样您就可以识别出该标题属于 h1 标签并将更改黑色。

示例 3

h1 {color:black;} 
<h1 class="title"> This is the title </h1>

在此示例中，您可以识别所有标签并随意更改它们。这将获取文档中的所有 h1 标签并使文字的颜色变为黑色，无论它是否属于某个类。

摘要示例：

总而言之，您可以结合所有这三种技术来更改各种对象并将特定元素定义为特定样式。因此，当您使用多种这些技术时它将全部读取仅用于操作目的：因此类选择器将查找类，标签选择器将查找标签等。Look at this JSFiddle

h1 {padding:20px;}
h1 .title {color:green;}
#subtitle {color:red;}

<h1 class="title"> TITLE GOES HERE </h1> 
<h1 id="subtitle"> This is a subtitle </h1>

在此示例中，它将为两个元素添加填充，但仅将颜色添加到具有特定选择器的元素。

我希望这可以为您解决问题。

【讨论】：

【解决方案2】：

h1 标签的 text 属性是继承自样式类、继承自 h1 样式还是继承自两者？

CSS 中没有 text 属性 - 所以以上都没有。

标题上的任何属性都是inherited 的唯一位置是body 元素。在 CSS 继承中，属性的值为 inherit（例如 font-style: inherit）并且它从 DOM 中的父元素复制父元素。

样式表中唯一的选择器是type selectors，唯一与<h1> 匹配的是h1 选择器，因此该规则集中的规则将应用于标题。

如果您有一个与<h1> 匹配的class selector（这将要求它成为该HTML 类的成员（通过类属性），那么它将覆盖类型选择器中的任何规则，因为类选择器是more specific。

【讨论】：