jquery - 为什么 jQuery 不应用边框样式？

Question

我想知道为什么当我应用 addCLass 方法时 JQuery 没有应用border-bottom css 属性。它应用颜色但不应用边框。这是为什么？JSFiddle：http: //jsfiddle.net/egh7a/

谢谢。

html

<section class="news">
    <article>one</article>
    <article>two</article>
    <article>three</article>
    <article>four</article>
</section>

jQuery

$(".news article:last").addClass("two");

css

.news {
   border-top: 1px solid #777;
}

.news article {
   padding-top: 10px;
   padding-bottom; 10px;
   border-bottom: 1px dashed #999;
}

.two {
   color: red;
   border-bottom: black solid 2px; 
}

Answer 1

文章项目从更具体的 css 规则中获取其样式。

在这种情况下.news article比 更具体.two。

尝试将您的.two课程.news .two改为。

Answer 2

因为新border样式不会覆盖上一个样式。您可以使用它!important来覆盖它。

.two {
  color: red;
  border-bottom: black solid 2px !important; 
}

JSFiddle