如何更改li元素的背景颜色

Question

https://jsfiddle.net/oski369/2Lzc6q95/

当我将其插入js小提琴时，每个li的背景颜色都会根据需要更改其类（偶数或奇数）。 但是，当我在浏览器中运行相同的代码时，背景色将被忽略。 我还注意到，在小提琴中，我在背景图像中放置的“ cover”属性在浏览器中正常运行时会被忽略。

我在文本编辑器中使用了引导程序，而显然不是这种情况。 如果这可能是问题，那么Idk，但是我将如何在文本编辑器中的小提琴中出现的列表项之间完成相同的交替颜色更改？

HTML：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"/>
 <link rel="stylesheet" type="text/css" media="all" href="css/animate.min.css"/>
  <link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"/>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
 <link href="css/stockData.css" rel="stylesheet" type="text/css"/>
 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body class="text-primary">
  <h1 >StockData</h1>
  <div class="row" id="stockTable">
    <ul>
       <li class="odd">
        <span class="col-md-4">Ticker</span> 
        <span class="col-md-4">% Change</span> 
        <span class="col-md-4">Position</span>
      </li> 
      <li class="even">
        <a class="col-md-4">AAPL</a>
        <span class="col-md-4">+3%</span>
        <span class="col-md-4"> <span class="holding">5.4</span><span>%</span> <span>Short</span></span>
      </li>
      <li class="odd">
        <span class="col-md-6">Portfolio</span> 
        <span class="col-md-6">+2.4%</span>
      </li>
    </ul>
  </div>
   <script src="stockData.js"></script>
</body>
</html>

CSS：

#stockTable {
    width:38%;
    margin-left: 2px;
}
.odd{
  background:rgba(0,0,0,.8);
}
.even{
  background:rgba(0,0,0,.6);
}
ul{
    list-style-type:none;
}
body{
    background-image:url('http://evilcorps.com/wp-content/uploads/2014/12/wall_street_1920.jpg');
    background-size: cover;
}
h1{
    margin-left: 2px;
}

Answer 1

如果我正确理解了您的问题，则希望根据列表项li的子项是奇数还是偶数为它们赋予背景颜色。

您应该在列表项li的子代上的CSS中使用nth-child来完成此任务。

您应该尝试这样的事情：

1）下面给出的css样式将使所有偶子的背景变为蓝色。

li span:nth-child(2n){
    background:#00f;
}

2）下面给出的css样式将使所有奇数子项的背景变为白色。

li span:nth-child(2n+1){
    background: #fff;
}

我希望可以帮助:)

Answer 2

在您的span和a标签要定义引导列class="col-md-4"或class="col-md-6"分别。 尝试给li标签赋予一行以容纳这些列。

<li class="odd row">
  <span class="col-md-4">Ticker</span> 
  <span class="col-md-4">% Change</span> 
  <span class="col-md-4">Position</span>
</li> 
<li class="even row">
  <a class="col-md-4">AAPL</a>
  <span class="col-md-4">+3%</span>
  <span class="col-md-4"> <span class="holding">5.4</span><span>%</span>    <span>Short</span></span>
</li>
<li class="odd row">
  <span class="col-md-6">Portfolio</span> 
  <span class="col-md-6">+2.4%</span>
</li>

这是boot.ply上的一个演示，该演示应内置所有引导程序代码。

Answer 3

尝试这个：

 
 
 
  
  .odd{ background:rgba(0,0,0,.8) !important; } .even{ background:rgba(0,0,0,.6) !important; }
 
  

“！important”将替代任何其他样式。

---

好的，因此，如果它被认为是黑客，那么我认为您唯一的方法是更改​​Bootstrap.css中的值或使用您自己的类或类似的东西进行操作：

li { 
    background:rgba(0,0,0,.8);
}

li:nth-of-type(2n) {
    background:rgba(0,0,0,.6);
} 

虽然您应该删除.odd和.even类，否则它将不起作用。 您可以给ul自己的类，然后在CSS中编写ul.class-name li {}而不是li，以使其仅更改此特定ul的li颜色。