Установка цвета шрифта <a>внутри тега li

Моя разметка выглядит так:

<div class="c1">
      <li class="c2"><a href="">blah</a></li>
</div>

Я хочу, чтобы текст blah был красным.

c1 используется в других местах, поэтому я хочу как можно больше развернуть, не затрагивая другую разметку.

ОТВЕТЫ

Ответ 1

Используйте это определение стиля в вашем css файле:

div.c1 li.c2 a {
  color: red;
}

PS: Тег <li> внутри вашего <div> -tag без <ul> -tag не рекомендуется.

Ответ 2

<style>
  div.c1 li.c2 a { color: red; }
</style>

Ответ 3

<div class="c1">
      <li class="c2"><a href="">blah</a></li>
</div>
<style>
  div.c1 li.c2 a { color: red; }
</style>

Ответ 4

Наиболее специфичные селектор CSS, вероятно, будет

div.c1 > li.c2 > a:link,
div.c1 > li.c2 > a:active,
div.c1 > li.c2 > a:hover,
div.c1 > li.c2 > a:visited {
    color: red;
}

Чем точнее CSS-селектор, тем меньше будет работать для механизма рендеринга браузера.

Однако с вашей разметкой что-то не так, если это предполагается как HTML, а <li> родительский элемент - это & ​​lt; div > вместо <ol> или <ul> .

Ответ 5

Используйте следующее правило:

div.c1 li.c2 a {
    color: red;
}

Это соответствует тегам a внутри тегов li с классом c2 внутри тегов div с классом c1.

Для дополнительной уникальности вы можете дать тегу a собственное имя класса.

Кроме того, теги li должны отображаться только внутри тегов списка. (ul или ol).
Вы имели в виду <li class="c1">?

Ответ 6

.c1 .c2 a {
  color: red;
}

Ответ 7

.c2 a
{
     color: red;
}

Ответ 8

Следующий код будет делать (очень конкретный).

.c1 .c2 a { color: red; }

Ответ 9

Сначала выберите div, который вы хотите изменить, это .c2 внутри этой ссылки, которая должна быть выбрана как

.c2 a { color:red }