Question

这是我的问题：我想使用<span>为引导程序.well中的日期着色。这是我的代码的一部分：

＆＃13;

  .cv span.date{
	font-weight:bold !important;
	color: #5882FA !important;
  }

＆＃13;

<div id="cv" class="container text-center">
  <div class="row">
    <div class="col-sm-4">
      <div class="well"><span class="date">2016-2018</span> I ate sandwiches </div>
    </div>
  </div>
</div>

＆＃13;

问题在于：无论我做什么，<span>的内容都会继承.well的属性。我已经尝试过提供一个＆＃34; id＆＃34;到了跨度而不是＆＃34;类＆＃34;，并将颜色和粗体属性放在<span>应答器中。如何以粗体和颜色显示日期？

Answer 1

您的容器<div>使用的是身份#cv而非.cv。您也可以<span>的CSS规则为more specific：

#cv div.well span.date {
  color: #5882FA;
  font-weight: bold;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="cv" class="container text-center">
  <div class="row">
    <div class="col-sm-4">
      <div class="well"><span class="date">2016-2018</span> I ate sandwiches </div>
    </div>
  </div>
</div>

Answer 2

在你的CSS选择器中，你正在调用.cv - 这是不正确的，因为cv是一个ID：

 #cv span.date{
    font-weight:bold;
    color: #5882FA;
  }

Answer 3

只有在.well

时才会发生这种情况

1。）具有更高规格的CSS规则，并且还使用!important或

2。）如果.well的规则在 .cv span.date的规则之后>，则至少具有相同的规范，并使用!important

因此，尽量让你的规则尽可能高。从您的代码中，具有最高可能性的选择器将是

div#cv.container.text-center > div.row > div.col-sm-4 > div.well > span.date { font-weight:bold !important; color: #5882FA !important; }

<span>在Bootstrap井内

3 个答案: