Элементы списка стилей в определенном разделе - PullRequest
Новая
       9

Элементы списка стилей в определенном разделе

4 голосов
/ 06 октября 2009

У меня есть div-структура, подобная нижней: 

<div class="body-content">
  <div class="col-middle">

  </div>
</div>

Я хочу установить стиль для элементов списка в классе body-content и убедиться, что он не применяется ни к чему в col-middle

Я думал, что это будет что-то вроде ... 

.body-content li { }

, но он применяет эти стили и к элементам списка в col-middle.

Ответы [ 7 ]

5 голосов
/ 06 октября 2009

Самый простой и наиболее обратно совместимый вариант: 

div.body-content li { /* some style */ }
div.col-middle li { /* some other style */ }

Возможно, вы сможете использовать дочерний селектор: 

div.body-content > ul li

но это не поддерживается в IE6.

Кроме того, это зависит от того, как именно написана ваша разметка и каковы ваши требования в отношении поддержки браузера.

Если возможно, измените разметку на: 

<div class="body-content">
  <div class="col-middle">
  ...
  </div>
  <div class="col-other">
  ...
  </div>
</div>

или что-то подобное, чтобы вы могли легко различать, какой список вы хотите стилизовать.

1 голос
/ 06 октября 2009

Я бы тогда обнулял .body-content .col-middle li {} ПОСЛЕ стилизации .body-content li {} 's

Ваш единственный другой вариант - указать, где будет находиться ли: 

.body-content .li-block li { }
0 голосов
/ 06 октября 2009

Пример, показанный ниже, работает лучше всего (я добавил дополнительную разметку, чтобы продемонстрировать это), но я бы рекомендовал стилизовать .body-content, а затем переопределить эти стили в .col-middle. Это было бы наиболее совместимым с браузером. 

<!DOCTYPE html>

<html>
<head>
<title></title>
<style type="text/css">
.body-content > *:not(.col-middle) li {
    color: red;
}
</style>
</head>
<body>

<div class="body-content">
  <div class="col-middle">
    <ul>
        <li>item 1</li>
        <li>item 2</li>
    </ul>
  </div>

  <div>
    <ul>
        <li>item 1</li>
        <li>item 2</li>
    </ul>
  </div>

  <ul>
    <li>item 1</li>
    <li>item 2</li>
  </ul>
</div>

</body>
</html>
0 голосов
/ 06 октября 2009

Код, который вы пробовали, определяет, как должны выглядеть элементы списка ТОЛЬКО внутри .body-content, даже если они находятся внутри .col-middle.

При использовании CSS2 нет никакого способа сделать то, что вы хотите: начните с указания, как должны работать элементы списка вне .col-middle, а затем укажите, как они должны быть стилизованы внутри .col-middle.

Однако, используя CSS3, вы можете сделать что-то вроде этого: 

:not(.col-middle) li{}

Обратите внимание, что это не работает ни в одном браузере IE.

0 голосов
/ 06 октября 2009

Вы должны использовать, который поместит стиль только для сыновей li .body-content 

.body-content > ul li {}
0 голосов
/ 06 октября 2009

Рестилль col-middle. 

div.body-content li {
  color: red;
}

div.col-middle li {
  // overrides stuff
  color: black;
}

Стили каскадно переходят от родительских элементов к их дочерним элементам.

0 голосов
/ 06 октября 2009

Вам нужно: 

.body-content > ul li { ... }

Это будет выбирать только элементы списка, которые являются прямыми потомками ul в .body-content.

Редактировать: Упс, неверное место для>!

Редактировать: Извините, также должен был упомянуть - дочерние селекторы не работают в IE6.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...