CSS - синтаксис для выбора класса внутри идентификатора - PullRequest
Новая
       6

CSS - синтаксис для выбора класса внутри идентификатора

68 голосов
/ 17 июля 2009

Каков синтаксис селектора для выбора тега внутри идентификатора через имя класса? Например, что мне нужно выбрать ниже, чтобы внутренний «li» стал красным? 

<html>
<head>
    <style type="text/css">
        #navigation li
        {
            color: green;
        }

        #navigation li .navigationLevel2
        {
            color: red;
        }
    </style>
</head>
<body>
    <ul id="navigation">
        <li>Level 1 item
            <ul class="navigationLevel2">
                <li>Level 2 item</li>
            </ul>
        </li>
    </ul>
</body>
</html>

Ответы [ 4 ]

79 голосов
/ 17 июля 2009 
#navigation .navigationLevel2 li
{
    color: #f00;
}
6 голосов
/ 17 июля 2009

Это также сработает, и вам не нужен дополнительный класс: 

#navigation li li {}

Если у вас третий уровень LI, вам, возможно, придется сбросить / переопределить некоторые из стилей, которые они унаследуют от вышеуказанного селектора. Вы можете выбрать третий уровень следующим образом: 

#navigation li li li {}
1 голос
/ 17 июля 2009

Вот два варианта. Я предпочитаю вариант navigationAlt, так как в итоге он требует меньше работы: 

<html>

<head>
  <style type="text/css">
    #navigation li {
      color: green;
    }
    #navigation li .navigationLevel2 {
      color: red;
    }
    #navigationAlt {
      color: green;
    }
    #navigationAlt ul {
      color: red;
    }
  </style>
</head>

<body>
  <ul id="navigation">
    <li>Level 1 item
      <ul>
        <li class="navigationLevel2">Level 2 item</li>
      </ul>
    </li>
  </ul>
  <ul id="navigationAlt">
    <li>Level 1 item
      <ul>
        <li>Level 2 item</li>
      </ul>
    </li>
  </ul>
</body>

</html>
1 голос
/ 17 июля 2009 
.navigationLevel2 li { color: #aa0000 }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...