Проблема CSS - элемент работает, только если у него нет родителя (с помощью jquery) - PullRequest
Новая
       5

Проблема CSS - элемент работает, только если у него нет родителя (с помощью jquery)

2 голосов
/ 02 декабря 2010

у меня есть этот код:

CSS: 

.taglist 
{
    float:left;
    margin-left:30px;
}
.taglist ul 
{
    overflow:auto;
    list-style-type:none;
    border:1px solid #999;
    background:#ccc;
    padding:20px;
    min-height:150px;
    max-height:150px;
    width:100px;
}

.taglist li
{
    display:block;
    border:1px solid #999;
    background:#fff;
    width:80px;
    padding:5px 10px;
    margin-bottom:5px;
}
.tag_selected {
    background:#ffc;
}

HTML: 

<div class="taglist">
    <ul id="list1">
        <li id="1">1</li>
    </ul>
</div>

Теперь я использую jQuery для этого .. поэтому, когда элемент в списке выбран, он должен изменить свой класс на tag_selected.

Проблема в том, что это работает, только если я удаляю ".taglist" перед ul и li css, и я не хочу этого делать, потому что я хочу, чтобы стиль был только в div "taglist". 1011 *

Я пробовал каждую комбинацию, например ".taglist tag_selected", ".taglist ul li tg_selected" и т. Д., Но ничего не работает !!

что я могу сделать?

кстати, пробуя эту строку: 

<li class="tag_selected" id="1">1</li>

дал тот же результат, без изменений, как раньше ..

Заранее спасибо!

1 Ответ

1 голос
/ 02 декабря 2010

Ваша проблема, похоже, Специфика выбора CSS .

Правила .taglist ul и .taglist li более конкретны, чем .tag_selected, и поэтому ваш класс назначен, но фон переопределяется на .taglist li.

Это должно работать 

.taglist li.tag_selected {
    background:#ffc;
}

Тег специфичности (от слабейшего к сильнейшему), класс, ID. Самый простой способ запомнить вычисленные значения - это обрабатывать сумму каждого как цифру, с тегом 1, классом 10 и идентификатором 100.

  • li - 1
  • .taglist - 10
  • .taglist li - 11
  • li#myId - 101
  • div.taglist li.tag_selected - 22 * ​​1039 *

См. http://htmldog.com/guides/cssadvanced/specificity/ для получения справки или Google "css специфичность".

...