CSS Html <ul> 列表更改某些列表文本颜色和背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15420312/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Html <ul> list changing certain list text color and background color
提问by Tautvydas
My html:
我的html：
<ul class="tech">
<li>JavaScript</li>
<li>HTML / CSS</li>
<li>PHP + MYSQL</li>
<li>C#</li>
<li class="software">PhotoShop</li>
<li class="software">Brackets</li>
<li class="software">Notepad++</li>
<li class="software">Sony Vegas</li>
<li class="software">eBay BlackThorne Pro</li>
<li class="software">Senuke XCr</li>
<li class="software2">X-Cart</li>
<li class="software2">EKM PowerShop</li>
<li class="software2">WordPress</li>
<li class="software2">phpBB</li>
</ul>
</div>
Css part of this html:
这个 html 的 CSS 部分：
.tech ul {
padding: 0px 0px 0px 0px;
margin-bottom: 10px;
margin-top: 10px;
list-style:none;
list-style-position:outside;
}
.tech li{
display:inline-block;
text-align: center;
background-color: #cccccc;
color: #222222;
margin: 5px 0px 5px 0px;
border-radius: 3px;
-moz-border-radius: 3px;
box-shadow: 2px 3px 5px #000000;
border: #969696 1px dashed;
}
.sofware {
background-color:#646464;
color: #ff7225;
}
.sofware2 {
background-color:#4d4d4d;
color: #fd205e;
}
Problem: list items which software and sofware2 ids doesn't change color. What's the problem? Something should be like this I guess I should set those colors with "UL Li:nth-child" but I'm not sure how to do that.
问题：列出软件和软件 2 id 不会改变颜色的项目。有什么问题？应该是这样的，我想我应该用“UL Li:nth-child”设置这些颜色，但我不知道该怎么做。
Thanks in Advance
提前致谢
回答by radu florescu
the jsfiddle says it works: http://jsfiddle.net/nLWAE/1/
jsfiddle 说它有效：http: //jsfiddle.net/nLWAE/1/
<ul class="tech">
<li>JavaScript</li>
<li>HTML / CSS</li>
<li>PHP + MYSQL</li>
<li>C#</li>
<li class="software">PhotoShop</li>
<li class="software">Brackets</li>
<li class="software">Notepad++</li>
<li class="software">Sony Vegas</li>
<li class="software">eBay BlackThorne Pro</li>
<li class="software">Senuke XCr</li>
<li class="software2">X-Cart</li>
<li class="software2">EKM PowerShop</li>
<li class="software2">WordPress</li>
<li class="software2">phpBB</li>
</ul>
.tech ul {
padding: 0px 0px 0px 0px;
margin-bottom: 10px;
margin-top: 10px;
list-style:none;
list-style-position:outside;
}
.tech li{
display:inline-block;
text-align: center;
background-color: #cccccc;
color: #222222;
margin: 5px 0px 5px 0px;
border-radius: 3px;
-moz-border-radius: 3px;
box-shadow: 2px 3px 5px #000000;
border: #969696 1px dashed;
}
.software {
background-color:#646464;
color: #ff7225;
}
.software2 {
background-color:#4d4d4d;
color: #fd205e;
}
回答by jmoerdyk
First, your CSS selectors don't match your ids. You have "software" in the id, but "sofware" in the CSS selector. But you also have duplicate ids, which is wrong.
首先，您的 CSS 选择器与您的ids不匹配。您在 id 中有“软件”，但在 CSS 选择器中有“软件”。但是您也有重复的ids，这是错误的。
Change your
改变你的
<li id="software"></li>
<li id="software2"></li>
to
到
<li class="software"></li>
<li class="software2"></li>
then change your CSS to:
然后将您的 CSS 更改为：
.tech li.software {
background-color:#646464;
color: #ff7225;
}
.tech li.software2 {
background-color:#4d4d4d;
color: #fd205e;
}
