边框 CSS - 意外行为

Question

我在 HTML 中创建了一个 div，我有一个 CSS class。我将举一个我的代码示例来更好地解释它：

HTML

<div style="text-align:center;" class="container">
  <span class="message col-xl-12 col-lg-12 col-md-12 col-sm-12 col- 
   xs-12">Test</span>
</div>

我的问题是我没有得到 CSS class "message"

的行为

一开始我是这样做的：

    .message{
  margin-top: 30px;
  height: 3em;
  line-height: 3em;
  font-size: 25px;
  text-align: center;  
  border-style: solid;
  border-color: #0A76BC;  
  border-bottom: 2px;
  margin-bottom: 5%;
}

但我的发现完全出乎意料。我正好出现了class（border-top）中没有提到的border，但其余的：

所以我做了完全相反的事情，我工作了:/

.message{
  margin-top: 30px;
  height: 3em;
  line-height: 3em;
  font-size: 25px;
  text-align: center;  
  border-style: solid;
  border-color: #0A76BC;  
  border-top: 2px;
  border-left: 2px;
  border-right: 2px;
  margin-bottom: 5%;
}

我唯一能得到的是 bootstrap 的 class container 有一些特殊功能。有人可以解释一下吗？

Answer 1

border-bottom: 2px; 是 border-left-style、border-left-width 和 border-left-color 的 shorthand。由于您没有定义 border-left-style，因此使用默认值：none。它覆盖了 border-style.

的值

border-bottom: 2px solid;

将按预期工作。

Answer 2

添加到 Axnyff 的回答中。要了解 CSS（级联样式 Sheet）如何工作以及为什么会出现奇怪的行为，我们需要解释差异以及它们如何相互覆盖。我们可以通过三种方式将 CSS 应用于 html 元素，即内联、内部和外部 CSS。

内联CSS:
内联 CSS 或定义为元素属性样式值的样式覆盖内部和外部 CSS。
内部 CSS:
在页面覆盖外部 CSS 的页眉部分中声明的内部 CSS 只要。
外部 CSS:
内联和内部 CSS 使用 .css 覆盖外部导入的 CSS 文件扩展。

当涉及到使用内部和外部 CSS 时，用 id 选择器声明的 CSS 覆盖另一个用 class 选择器声明的 CSS，它使用相同的元素样式相同的属性，示例：

CSS

#test_id { color: red; }
.test_cls { color: green; }

HTML

<div id="test_id" class="test_cls">which color?</div>

上面 div 元素内的文本将是红色的，因为 #test_id 覆盖 .test_cls class.

如果您不小心，使用 class 将多个 CSS 应用于同一元素可能会导致奇怪的结果，当两个或更多声明 CSS [=90= 时会发生这种情况] 具有相同的属性。示例：

CSS

.bdr1 { border: 2px solid red; } 
.bdr2 { border: 4px solid green; }

HTML

<div class="bdr1 bdr2">Which border style is going to be applied?</div>

刚好.bdr2是应用的，但是如果我们要应用.bdr1怎么办 class？好吧，我们把上面的 CSS .bdr1 改成这样：

.bdr1 { border: 2px solid red!important; }

覆盖

.bdr2 { border: 2px solid green; }

但要小心使用“!important”。

边框 CSS - 意外行为

Border CSS - Unexpected behavior

html

css

border