如何处理同一元素的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规则应用于第一个边界规则(即边框:1px实心黑色!重要;

B部分:绝对没有!