边框CSS-意外行为

border-bottom: 2px; 是 border-left-style ,则, border-left-width 和 border-left-color .因为你没有定义 左边框样式 使用默认值: none 。它将覆盖 border-style 。

border-bottom: 2px solid;

将按预期工作。

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

1. 内联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”。