https://jsfiddle.net/oski369/2Lzc6q95/
当我将它插入 js fiddle 时，每个 li 的背景颜色都会根据我希望的类(偶数或奇数)发生变化。但是，当我在浏览器中运行相同的代码时，背景颜色将被忽略。我还注意到，在 fiddle 中，我在背景图像中放置的“cover”属性被忽略，但它在我的浏览器中运行良好。
我在我的文本编辑器中使用 bootstrap，而在 fiddle 中显然不是这样。 Idk 如果这可能是问题，但我将如何在我的文本编辑器的 fiddle 中出现的列表项之间实现相同的交替颜色变化？
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;
}
最佳答案
如果我对你的问题的理解正确，你想给列表项 li 的 children 赋予背景颜色，这取决于他们是奇数还是偶数。
您应该在列表项 li 的子项上使用 css 中的 nth-child 来完成此操作。
你应该尝试这样的事情:
1)下面给出的css样式，将所有偶数子项的背景设为蓝色。
li span:nth-child(2n){
background:#00f;
}
2)下面给出的css样式，将所有奇数 child 的背景设为白色。
li span:nth-child(2n+1){
background: #fff;
}
希望对您有所帮助:)
关于html - 如何更改 li 元素的背景颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35323313/