边框CSS - 意外行为

Question

我在div中创建了一个HTML，我有一个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类的行为＆＃34;消息＆＃34;

一开始我的表现如下：

    .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%;
}

但我发现的完全出乎意料。我出现的是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%;
}

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

Answer 1

border-bottom: 2px;是border-left-style，border-left-width和border-left-color的简写。由于您未定义border-left-style，因此使用默认值：none。它覆盖了border-style的价值。

border-bottom: 2px solid;

将按预期工作。

Answer 2

增加Axnyff回答的内容。要了解CSS（级联样式表）的工作原理以及为什么会出现奇怪的行为，我们需要解释它们之间的区别以及它们如何相互覆盖。我们可以通过三种方式将CSS应用于html元素，即内联，内部和外部CSS。

1. INLINE CSS：
   内联CSS或样式，定义为元素的属性样式值 覆盖内部和外部CSS。

2. 内部CSS：
   在页面标题部分声明的内部CSS覆盖外部CSS 只要。

3. 外部CSS：
   内联和内部CSS使用.css覆盖外部导入的CSS文件 扩展

当使用内部和外部CSS时，使用id选择器声明的CSS会覆盖使用类选择器声明的另一个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类。

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

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该怎么办？ 类？好吧，我们将上面的CSS .bdr1更改为：

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

覆盖

.bdr2 { border: 2px solid green; } 

但要小心使用“！important”。