Question

我正在尝试从以下标记中定位ol.sc-tracklist

<ul id="sc-track-list">
<li class="sc-track format-audio">
<div class="sc-player">
<ol class="sc-artwork-list">
<li class="sc-time-indicators">
<span class="sc-position">0.00</span>
 ¦
 <span class="sc-duration">2.38</span>
</li>
<li class="sc-controls">
<a class="sc-play" href="#play">4</a>
 <a class="sc-pause" href="#pause">5</a>
</li>
<li class="sc-track-artwork active">
<div class="sc-no-artwork"> 
</li>
</ol>
<ol class="sc-trackslist">
<li class="sc-info">
<h3 class="sc-track-title">
<a href="http://soundcloud.com/jillian02/gently">Gently</a>
<a class="sc-info-toggle button" href="#info">
more
<span class="icon">i</span>
</a>
</h3>
<div class="sc-more-info">
<h4>
 by
 <a href="http://soundcloud.com/jillian02">Jill Owen</a>
 </h4>
 <p class="remove-bottom">solo piano music</p>
 </div>
 <footer></footer>
 </li>
 <li class="active">
 <span class="sc-track-state"></span>
 <a href="http://soundcloud.com/jillian02/gently">Gently</a>
 <a href="null">
 <span>Buy</span>
 <span class="icon">}</span>
 </a>
 </li> 
 </ol>
 </div>
 <div class="meta">
 <p>
 <a class="spch-bub-inside" href="#">
 <span class="point"></span>
 <em>23</em>
 </a>
 </p> 
 </div>
 </li>
 </ul>

我试过

.sc-track.format-audio .sc-player .sc-tracklist

和

.sc-track.format-audio div.sc-player ol.sc-tracklist

但没有快乐。

内容是从jquery json响应动态生成的，我想知道这是否有任何影响。

有什么想法吗？非常感谢

Answer 1

您的HTML格式不正确。移动它：

<div class="meta">

<li></li>。

或者如果它应该在那里，请关闭它：

 <div class="meta"></div>

此外，<ol>元素也应该关闭。

编辑：这对我有用（见行动here）：

CSS：

li.sc-track.format-audio ol.sc-trackslist {
    font-size: 100px;
}

HTML：

<html>
    <head>
    </head>
    <body>
        <li class="sc-track format-audio">
            <div class="sc-player">
                <ol class="sc-artwork-list"></ol>
                <ol class="sc-trackslist">
                    <li>SC TRACKLIST</li>
                </ol>
            </div>
            <div class="meta"></div>
        </li>
    </body>
</html>

Answer 2

首先修改并确保您的HTML符合W3C。

对于li代码，类被指定为sc-track format-audio

要定位特定标记，您可以直接使用该标记ID或类名进行定位。

示例：

.sc-trackslist

OR

.format-audio .sc-trackslist

OR

.sc-track .sc-trackslist

在某些情况下，您需要按以下方式进行定位： -

#parentID .2ndChildClass .1stChildClass

CSS选择器定位有序列表

2 个答案:

CSS：

HTML：