樣式A <li> 元件

Question

我正在嘗試列出音樂元素及其圖片和手機使用說明。 因為我必須使用響應式設計，所以我實現了Foundation，但是現在如果我想組成一個<li>項目，他找不到正確的CSS，所以我嘗試將數字放在css文件名之前以進行操作他用來將樣式放在元素上的順序，我的代碼如下所示：

主頁：

<ul class="small-block-grid-3 large-block-grid-6">
    <li class="spotsList">
        <div class="spotsDiv">
            <img src="Images/PlayIcon.png" style="width: 50px; height: 50px; float:left"/>
            <article>
                <b>Spotnaam: <asp:Label ID="lblNaam" runat="server" Text="Duvel forever"></asp:Label></b>
                <br/> 
                Spotnr: <asp:Label ID="lblnr" runat="server" Text="049345679"></asp:Label>
            </article>
        </div> 
    </li>

    <li class="spotsList">
        <div class="spotsDiv">
            <img src="Images/PlayIcon.png" style="width: 50px; height: 50px; float:left"/>
            <article>
                <b>Spotnaam: <asp:Label ID="Label1" runat="server" Text="Duvel always"></asp:Label></b>
                <br/> 
                Spotnr: <asp:Label ID="Label2" runat="server" Text="049345679"></asp:Label>
            </article>
        </div> 
    </li>
</ul>

我的CSS像這樣：

/*Layout Divs for spots*/
.spotsDiv {
    height: 56px;
    width: 400px;
}

/*Layout li items*/
.spotsList {
    width: 400px; 
    margin-right: 10px; 
    margin-bottom:5px; 
    border-bottom: 1px solid black;
}

我應該使用另一種樣式設置還是有另一種方法選擇要實現的CSS順序？ 有什么建議么？

Answer 1

您不需要數字來訂購CSS文件。 加載的樣式是HTML中外觀的順序。

順序為1、2、3：

...
<link rel="stylesheet" type="text/css" href="1.css">
<link rel="stylesheet" type="text/css" href="2.css">
<link rel="stylesheet" type="text/css" href="3.css">
...

順序為2、3、1：

...
<link rel="stylesheet" type="text/css" href="2.css">
<link rel="stylesheet" type="text/css" href="3.css">
<link rel="stylesheet" type="text/css" href="1.css">
...

最后加載的樣式會覆蓋之前的樣式（如果它們具有相同的特殊性http://css-tricks.com/specifics-on-css-specificity/ ）。

Answer 2

正如我在您的示例中看到的那樣，該家伙只是在使用圖像，您可以嘗試執行以下操作：

http://jsfiddle.net/Ltr8r/

您必須顯示圖像而不是默認的列表樣式！

 list-style-type: none;
 background-image: url(Images/PlayIcon.png);

如果只是CSS問題，則必須在所有其他CSS之前放自己的CSS ；-)