Question

下面是垂直对齐的Boostrap选项卡控件的html代码 - 示例（裸骨 - 这是一个工作示例）。在鼠标悬停在标签上时，标签的默认颜色似乎是浅灰色（我猜测来自boostrap.min.css）。有没有办法可以将颜色从浅灰色改为我自己的CSS中的其他东西？喜欢覆盖默认颜色（如果是这样）？那是什么css？

<html>
<head runat="server">
<title></title>

<link rel="stylesheet prefetch" href="bootstrap.min.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>

    <style type="text/css">
            .tabs-left > .nav-tabs > li,
            .tabs-right > .nav-tabs > li {
              float: none;
            }

            .tabs-left > .nav-tabs > li > a,
            .tabs-right > .nav-tabs > li > a {
              min-width: 74px;
              margin-right: 0;
              margin-bottom: 3px;
            }

            .tabs-left > .nav-tabs {
              float: left;
              margin-right: 19px;
              border-right: 1px solid #ddd;
            }

            .tabs-left > .nav-tabs > li > a {
              margin-right: -1px;
              -webkit-border-radius: 4px 0 0 4px;
                 -moz-border-radius: 4px 0 0 4px;
                      border-radius: 4px 0 0 4px;
            }

            .tabs-left > .nav-tabs .active > a,
            .tabs-left > .nav-tabs .active > a:hover,
            .tabs-left > .nav-tabs .active > a:focus {                                
              border-color: red blue red red;
              *border-right-color: lime;
            }
    </style>
</head>
<body>
    <form id="form1" runat="server">    
    <div class="container">    
        <div><h3>Tabs - vertical</h3>
          <div class="tabbable tabs-left">
            <ul class="nav nav-tabs">
              <li style="background-color:orange;"><a href="#a" data-toggle="tab">One</a></li>
              <li style="background-color:orange;" class="active"><a href="#b" data-toggle="tab">Two</a></li>
              <li style="background-color:orange;"><a href="#c" data-toggle="tab">Three</a></li>
            </ul>
            <div class="tab-content">
             <div class="tab-pane" id="a"> --A) testing row A</div>
             <div class="tab-pane  active" id="b"> --B) testing row B</div>
             <div class="tab-pane" id="c"> --C) testing row C </div>
                </div>
              </div>      
            </div>    
        </div>   
    </form>
</body>
</html>

Answer 1

CSS代表层叠样式表，因此在页面下方指定的规则会覆盖上述规则。但是，当您无法访问来自其他人的样式表（如引导程序）时，您可以通过多种方式更改这些内容。

1）最具体的规则获胜。所以，

h1 span:hover {
  color: blue;
}

span:hover {
  color: red;
}

表示当您将鼠标悬停在span标记内时h1包围的文字为蓝色，即使之后声明了span样式。 h1 span比span更具体，因此权重更大。

2）你可以在财产声明的末尾拍一个!important，但除非你必须这样做，否则通常要避免这种情况。所以，

h1 span:hover {
  color: blue;
}

span:hover {
  color: red !important;
}

意味着文字是红色的，因为!important更强大，更难以覆盖。

因此，对于您的情况，您只需要找到悬停时应用于选项卡的样式（右键单击它并检查样式窗格以查看它是如何被定位的），然后编写自己的规则在你的样式表中使用比引导程序具有更高程度的特异性。

此外，您似乎已将background-color设置为这些橙色标签的内联样式。像!important这样的内联样式也非常重要，因此您只需要很难用CSS操作它们。如果可以的话，我会尝试将它们移到课堂上（除非你只是为了这个问题而这样做，否则忽略这一部分）。

Answer 2

您正在寻找background-color：

mask = (df['state'] == '4. Closed') & (df['closeDate'] == '2017/3/27')
df['closeDate'] = df['closeDate'].mask(mask, df['correctCloseDate'])
df = df.drop('correctCloseDate', axis=1)
print (df)
  ID  closeDate         state
0  A  2017/4/12  3. Cancelled
1  B   2017/1/5     4. Closed
2  C   2017/4/1     4. Closed
3  D  2017/4/29  3. Cancelled
4  E  2017/2/27     4. Closed

当鼠标悬停在选项卡

2 个答案: