Изменение цвета текста в ссылках в списках - PullRequest
Новая
       15

Изменение цвета текста в ссылках в списках

0 голосов
/ 09 октября 2018

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

<h1>Lab Exercises</h1>
<ol class="orderedlist">
  <li><a class="listitem" href="labExercises/ex1">Lab 1</a></li>
  <li><a class="listitem" href="labExercises/ex2">Lab 2</a></li>
  <li><a class="listitem" href="labExercises/ex3">Lab 3</a></li>
  <li><a class="listitem" href="labExercises/ex4">Lab 4</a></li>
  <li><a class="listitem" href="labExercises/ex5">Lab 5</a></li>
  <li><a class="listitem" href="labExercises/ex6">Lab 6</a></li>
  <li><a class="listitem" href="labExercises/ex7">Lab 7</a></li>
  <li><a class="listitem" href="labExercises/ex8">Lab 8</a></li>
</ol>

CSS 

.listitem { color: orchid}
.orderedlist { color: fuchsia }

Ответы [ 4 ]

0 голосов
/ 09 октября 2018

CSS 

 .orderedlist,
 .orderedlist a,
 .listitem { 
      color: orchid;
      text-decoration:none;
  }

 .orderedlist a:hover,
 .listitem:hover { 
     color: fuchsia;
  }
0 голосов
/ 09 октября 2018 

.orderedlist li a {color: orchid }
<h2>list</h2>
<ol class="orderedlist">
  <li><a href="labExercises/ex1">Lab 1</a></li>
  <li><a href="labExercises/ex2">Lab 2</a></li>
  <li><a href="labExercises/ex3">Lab 3</a></li>
  <li><a href="labExercises/ex4">Lab 4</a></li>
  <li><a href="labExercises/ex5">Lab 5</a></li>
  <li><a href="labExercises/ex6">Lab 6</a></li>
  <li><a href="labExercises/ex7">Lab 7</a></li>
  <li><a href="labExercises/ex8">Lab 8</a></li>
</ol>
0 голосов
/ 09 октября 2018

Учитывая, что у вас есть ссылки глобального уровня и разные цветные ссылки в элементах списка, вы можете или не должны добавлять class="listitem" к каждой ссылке в списке. 

a {
  color: #007bff;
  text-decoration: underline;
}
a:hover {
  color: #0056b3;
  text-decoration: none;
}

.orderedlist,
.orderedlist a,
.listitem { color: orchid }

.orderedlist a:hover,
.listitem:hover { color: fuchsia }
<h1>Lab Exercises</h1>
<a href="#">Other links</a>
<ol class="orderedlist">
  <li><a class="listitem" href="labExercises/ex1">Lab 1</a></li>
  <li><a class="listitem" href="labExercises/ex2">Lab 2</a></li>
  <li><a class="listitem" href="labExercises/ex3">Lab 3</a></li>
  <li><a class="listitem" href="labExercises/ex4">Lab 4</a></li>
  <li><a href="labExercises/ex5">Lab 5</a></li>
  <li><a href="labExercises/ex6">Lab 6</a></li>
  <li><a href="labExercises/ex7">Lab 7</a></li>
  <li><a href="labExercises/ex8">Lab 8</a></li>
</ol>
0 голосов
/ 09 октября 2018 
li a {
    color: orchid;
}

Таким образом, вам не нужно добавлять class="listitem" в каждую строку.

Я думаю, что этот код отвечает на ваш вопрос: «более эффективный способ изменить цвет текстассылки, когда они находятся в списке ".

...