Question

A部分：
在这个例子中，我期望每个主要浏览器的结果是什么？假设以下css包含在一个文件中。

p {
      border:1px solid black
  }

.... further down the same css .....

p { /* repeated element selector */
    font-size:20px
  }

B部分：
如果<style>与外部样式表

相比，是否会改变任何结果

多年来，我发现开发人员通常会创建一个样式表，这个样式表在很多选择器中都很长，选择器通常会以不同的样式反复重复

Answer 1

部分A：p将同时设置border和font-size。如果以这种方式应用规则，就像这样做：

p{
    border:1px solid black;
    font-size:20px;
}

问题涉及到这样的css片段：

p{
    border:1px solid black;
}
...
p{
    border:10px solid black;
}

在这里，边界将被覆盖！如果你想保持“原始”1px边框，你应该使用“！important”CSS2规则应用于第一个边界规则（即边框：1px纯黑！重要;

B部分：绝对没有！

Answer 2

结果将是：

p {
 border:1px solid black;
 font-size:20px;
}

如果您稍后为同一个选择器定义相同的css属性，那么它将被覆盖，例如：

p {
      border:1px solid black
      font-size: 12px;
  }

.... further down the same css .....

p { /* repeated element selector */
    font-size:20px
  }

将是：

p {
 border:1px solid black;
 font-size:20px;
}

编辑：B：没有区别。

Answer 3

在样式表中多次指定相同的元素是很常见的。如果您有单独的样式表来处理设计的不同方面，或者如果您有一个CMS，其中一个样式表中有默认样式而另一个样式表中有主题样式，那么这种情况很常见。

网站将所有样式表合并到一个文件中以便下载以节省服务器负载也很常见。

鉴于上述情况，因此单个样式表对同一标记，类甚至ID具有多个引用是很常见的。

好消息是，这无关紧要。如果您多次指定相同的内容，CSS会将其视为合并它们。如果两个声明中的样式完全相同，则后者将覆盖前一个声明。这允许主题的样式覆盖CMS的默认样式。

唯一的例外是使用!important标记。这将强制标记为重要的一个覆盖其他任何内容。

对于你问题的B部分：不，它们将是相同的。通过外部CSS文件加载的样式与主HTML页面内嵌加载的样式之间没有区别。

通常最好通过外部CSS文件加载它们，因为它们可以由浏览器单独缓存到HTML页面，这意味着当用户访问您网站中的多个页面时，您的服务器工作量会减少

如何处理同一元素的css文件中的两个元素选择器？

3 个答案: