css - Html <ul> 列表更改某些列表文本颜色和背景颜色

标签 css html-lists

我的 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>

此 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; 
}

问题:列出软件和 sofware2 id 不改变颜色的元素。有什么问题?事情应该是这样的,我想我应该用“UL Li:nth-child”设置这些颜色,但我不确定该怎么做。

提前致谢

最佳答案

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; 
}

关于css - Html <ul> 列表更改某些列表文本颜色和背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15420312/

相关文章:

html - 浏览器滚动条不出现

javascript - 结合jquery datatables点击事件只在第一页有效,其他页面无效

html - 将鼠标悬停在 <li>item</li> 上也会更改文本颜色... CSS 技巧?

css - 为什么内联元素在 float 时表现得像 block 级元素?

jquery - 删除链接后的内容

javascript - jQuery .click() 事件不起作用。两个中的一个正在工作,另一个没有

javascript - 如何通过 JSON 数据创建列表,甚至是子项?

javascript - 如何 chop 无序列表并允许用户单击以显示全部?

html - 居中 ul 的自定义元素符号

html - 不仅包含其他列表的样式列表项