Невозможно изменить цвет вложенной ссылки - PullRequest
Новая
       9

Невозможно изменить цвет вложенной ссылки

0 голосов
/ 16 июня 2020

Я хочу иметь возможность отмечать одну из моих ссылок на каждой странице активным классом, чтобы текст на ней становился черным и подчеркивался. Я запускаю код на chrome, и я пробовал через живой сервер и изначально на chrome.

Я не могу логически понять, почему он не позволяет мне изменить цвет таким образом. 

/* Example CSS */

.nav li a {
  margin-left: 0px;
  margin-right: 10px;
  text-decoration: none;
  color: brown;
}

.active {
  text-decoration: underline;
}

.active a {
  color: black;
}

.nav li:hover {
  text-decoration: underline;
}
<!-- example.html-->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="estyles.css">
</head>

<body>
  <ul class="nav">
    <li class="active"><a href="example.html">Example</a>       </li>
    <li><a href="example1.html">Example1</a></li>
  </ul>
</body>

Ответы [ 3 ]

0 голосов
/ 16 июня 2020

Как я уже упоминал в своем комментарии, проблема заключается в специфике ваших селекторов. Измените селектор .active a на li.active a: 

/* Example CSS */

.nav li a {
  margin-left: 0px;
  margin-right: 10px;
  text-decoration: none;
  color: brown;
}

.active {
  text-decoration: underline;
}

li.active a {
  color: black;
}

.nav li:hover {
  text-decoration: underline;
}
<ul class="nav">
  <li class="active"><a href="example.html">Example</a> </li>
  <li><a href="example1.html">Example1</a></li>
</ul>
0 голосов
/ 16 июня 2020

Другой подход - использовать дочерний селектор (>) с селектором атрибутов .active > a[href]

.nav li a {
  margin-left: 0px;
  margin-right: 10px;
  text-decoration: none;
  color: brown;
}

.active {
  text-decoration: underline;
}

.active > a[href] {
  color: black;
}

.nav li:hover {
  text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="estyles.css">
</head>

<body>
  <ul class="nav">
    <li class="active"><a href="example.html">Example</a>       </li>
    <li><a href="example1.html">Example1</a></li>
  </ul>
</body>
0 голосов
/ 16 июня 2020

Вы можете попробовать это: 

.active a {
  color: black !important;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...