CSS - Синтаксис для вибору класу з ідентифікатором

76

Який синтаксис селектора для вибору тегу в ідентифікаторі за допомогою імені класу? Наприклад, що мені потрібно вибрати нижче, щоб внутрішнє "лі" стало червоним?

<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>

css css-selectors

— Джеремі
джерело

92

#navigation .navigationLevel2 li
{
    color: #f00;
}

— Джон Шихан
джерело

11

Тільки якщо наведений приклад - це вся розмітка. Наскільки відомо, розмітка потрібна більш складна. Я базував свою відповідь на поданій інформації.

— Джон Шихан,

Це не працює для мене. Я намагаюся вибрати класи .class1-1 в ідентифікаторі # container-1 , використовуючи # container-1 .class1-1 {Styles}, але це не працює. Я перевіряю елементи і бачу, що стилі взагалі не призначаються.

— Омар

7

Це також буде працювати, і вам не потрібен додатковий клас:

#navigation li li {}

Якщо у вас є третій рівень LI, вам, можливо, доведеться скинути / замінити деякі стилі, які вони успадкують від вищезазначеного селектора. Ви можете націлити третій рівень так:

#navigation li li li {}

— Енді Форд
джерело

2

Ось два варіанти. Я віддаю перевагу варіанту 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

.navigationLevel2 li { color: #aa0000 }

— Гален
джерело

ЯКЩО це робить трюк, не застосовуючи його до небажаних li: s, то це такий шлях, оскільки він має менше селекторів і, отже, швидший. Принаймні згідно з порадами щодо ефективності роботи сторінок Google.

— PatrikAkerstrand

0

Просто потрібно пробурити до останнього li.

    #navigation li .navigationLevel2 li

— ккроббіни
джерело