0

私の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が色を変えないアイテムをリストしてください。どうしたの？「ULLi：nth-​​child」で色を設定したほうがいいと思いますが、どうすればいいのかわかりません。

前もって感謝します

4

2 に答える 2

3

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; 
}
于 2013-03-14T21:13:47.377 に答える
2

まず、CSS セレクターが と一致しませんid。IDに「ソフトウェア」がありますが、CSSセレクターに「ソフトウェア」があります。しかし、重複idした s もありますが、これは間違っています。

あなたの

<li id="software"></li>
<li id="software2"></li>

に

<li class="software"></li>
<li class="software2"></li>

次に、CSS を次のように変更します。

.tech li.software {
    background-color:#646464;
    color: #ff7225;
}

.tech li.software2 {
    background-color:#4d4d4d;
    color: #fd205e; 
}
于 2013-03-14T21:21:41.940 に答える