Question

我试图用他们的照片和他们的移动用途描述来制作音乐元素列表。由于我必须使用响应式设计，我实施了基金会，但现在如果我想组成一个＆lt; 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放在另一个之前; - ）

设置<li>元素</li>

2 个答案: