CSS селектор таргетинга упорядоченный список - PullRequest
Новая
       1

CSS селектор таргетинга упорядоченный список

0 голосов
/ 07 января 2012

Я пытаюсь настроить таргетинг на 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. Интересно, имеет ли это какое-либо отношение.

Есть идеи?Большое спасибо

Ответы [ 2 ]

0 голосов
/ 07 января 2012

Сначала измените и убедитесь, что ваш HTML-код соответствует стандарту W3C.

Для тега li класс указан как sc-track format-audio

Чтобы указать целевой тег, вы можете настроить таргетинг непосредственно с помощьюID этого тега или имя класса.

Пример:

.sc-trackslist

ИЛИ

.format-audio .sc-trackslist

ИЛИ

.sc-track .sc-trackslist

В некоторых случаях вам необходимо выполнить следующие действия: -

#parentID .2ndChildClass .1stChildClass

0 голосов
/ 07 января 2012

Ваш HTML не очень хорошо сформирован. Переместить это: 

<div class="meta">

Из <li></li>.

Или, если он там должен быть, закройте его: 

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

Кроме того, элементы <ol> также должны быть закрыты.

РЕДАКТИРОВАТЬ: Это работает для меня (см. В действии здесь ):

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...