Question

我是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 }

Answer 1

li a {
    color: orchid;
}

这样，您不必在每一行中添加class="listitem"。

我认为这段代码可以回答您的问题： “一种在列表中更改链接文本颜色的更有效方法”。

Answer 2

考虑到您在列表项中具有全局级别的链接和不同颜色的链接，因此，您可以或不必向列表中的每个链接添加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>

Answer 3

css

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

 .orderedlist a:hover,
 .listitem:hover { 
     color: fuchsia;
  }

Answer 4

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

更改列表中链接的文本颜色

4 个答案: