Question

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

当我把它插入js小提琴时，每个li的背景颜色根据它的类（偶数或奇数）而改变，正如我想要的那样。但是，当我在浏览器中运行相同的代码时，背景颜色将被忽略。我还注意到，在小提琴中，＆＃34;封面＆＃34;我放在我的背景图像中的属性被忽略，而它在我的浏览器中工作正常。

我在文本编辑器中使用bootstrap，而显然情况并非如此。如果这可能是问题，请问如何但是如何在文本编辑器中出现在小提琴中的列表项之间完成相同的交替颜色更改？

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>

应该内置所有引导程序代码的

Here's a demo on 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而不是li中写ul.class-name li {}，使它只改变这个特定的ul颜色。

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

3 个答案: