CSS 选择器定位有序列表答案

【问题标题】：CSS selector targeting ordered listCSS 选择器定位有序列表
【发布时间】：2012-01-08 20:24:55
【问题描述】：

我正在尝试从以下标记中定位 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 响应动态生成的，我想知道这是否有任何影响。

有什么想法吗？非常感谢

【问题讨论】：

A div 不是 ul 或 ol 的有效子代，如果您必须在其中使用 div一个列表，将其放在 li 元素中（ul 或 ol 的 only 有效子元素）。
谢谢大卫，我可以看到 html 结构有点差。这会影响 css 的特异性吗？
是的，应该；浏览器倾向于重组损坏的 html 以使 DOM 有效（或尽最大努力使其有效）。他们如何处理这个问题通常是未指定的，也是不可预测的。它可能会也可能不会涉及将节点从一个地方移动到另一个地方，从而导致您的 CSS 选择器不再足够具体或准确。
很高兴知道，我会尝试清理一下

标签： html css css-selectors

【解决方案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>

【讨论】：

嗨 Behrang 感谢您的回答。我已经更新了html。我想知道你是否介意复习一下？非常感谢。詹姆斯。
James，你元素的类名是 trackSlist（带 s），但你的选择器是 tracklist。
顺便说一句，您是否遵循特殊流程来发现该错误？有没有我可以使用的方法来避免这些错误？再次感谢
不，我没有使用任何工具或流程，只是注意到了。有一个工具可以在页面上显示未使用的选择器，但它可能很有用：sitepointstatic.com/dustmeselectors。其他类似的工具也应该可用。在处理方面，您可以删除您的 CSS 规则，并通过将 HTML 中的类名复制并粘贴到您的 CSS 文件来重建您的规则。

【解决方案2】：

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

对于li标签，类指定为sc-track format-audio

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

例子：

.sc-trackslist

或

.format-audio .sc-trackslist

或

.sc-track .sc-trackslist

在某些情况下，您需要定位如下：-

#parentID .2ndChildClass .1stChildClass

【讨论】：