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

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 将同时设置边框和字体大小。如果您以这种方式应用规则，就像这样做一样:

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

问题与这样的 css 片段有关:

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

在这里，边界将被覆盖!如果你想保持“原始”1px 边框，你应该使用“!important”CSS2 规则应用于第一个边框规则(即 border:1px solid black !important;

B 部分:绝对不!