在每个偶数 div 中更改 link 的颜色

Question

我有一组div，其中包含一些要显示的信息。如何更改每个偶数容器内 link 文本的颜色？

.container {
  height: 200px;
  margin-top: 5px;
}
.container:nth-child(even){
  background-color: green;
}

.container:nth-child(odd) {
  background-color: skyblue;
}

<div class="container">
  Company website: <a href="abc.html">ABC</a>
  My Profile: <a href="user.html">User1</a>
  <button>Edit</button>
</div>
<div class="container">
  Company website: <a href="abc.html">ABC</a>
  My Profile: <a href="user.html">User1</a>
  <button>Edit</button>
</div>
<div class="container">
  Company website: <a href="abc.html">ABC</a>
  My Profile: <a href="user.html">User1</a>
  <button>Edit</button>
</div>
<div class="container">
  Company website: <a href="abc.html">ABC</a>
  My Profile: <a href="user.html">User1</a>
  <button>Edit</button>
</div>

Answer 1

这是你想要的吗？

.container {
  height: 200px;
  margin-top: 5px;
}

.container:nth-child(even){
  background-color: green;
}

.container:nth-child(even) a{
  background-color: green;
  color: red; <!-- Change the Colour here -->
}

.container:nth-child(odd) {
  background-color: skyblue;
}

<div class="container">
  Company website: <a href="abc.html">ABC</a>
  My Profile: <a href="user.html">User1</a>
  <button>Edit</button>
</div>
<div class="container">
  Company website: <a href="abc.html">ABC</a>
  My Profile: <a href="user.html">User1</a>
  <button>Edit</button>
</div>
<div class="container">
  Company website: <a href="abc.html">ABC</a>
  My Profile: <a href="user.html">User1</a>
  <button>Edit</button>
</div>
<div class="container">
  Company website: <a href="abc.html">ABC</a>
  My Profile: <a href="user.html">User1</a>
  <button>Edit</button>
</div>

Answer 2

就像你的意思，你使用 .container:nth-child(even) 来获取所有偶数容器，然后添加 a 来定位 link .container:nth-child(even) a { color: red; }

.container {
  height: 200px;
  margin-top: 5px;
}
.container:nth-child(even){
  background-color: green;
}
.container:nth-child(odd) {
  background-color: skyblue;
}
.container:nth-child(even) a {        /*  added property  */
  color: red;
}

<div class="container">
  Company website: <a href="abc.html">ABC</a>
  My Profile: <a href="user.html">User1</a>
  <button>Edit</button>
</div>
<div class="container">
  Company website: <a href="abc.html">ABC</a>
  My Profile: <a href="user.html">User1</a>
  <button>Edit</button>
</div>
<div class="container">
  Company website: <a href="abc.html">ABC</a>
  My Profile: <a href="user.html">User1</a>
  <button>Edit</button>
</div>
<div class="container">
  Company website: <a href="abc.html">ABC</a>
  My Profile: <a href="user.html">User1</a>
  <button>Edit</button>
</div>

Answer 3

添加 CSS 仅针对这些 div 的子项。

.container {
  height: 200px;
  margin-top: 5px;
}
.container:nth-child(even){
  background-color: green;
}

.container:nth-child(odd) {
  background-color: skyblue;
}

.container:nth-child(odd) a {
  color: green;
}

.container:nth-child(even) a{
  color: skyblue;
}

<div class="container">
  Company website: <a href="abc.html">ABC</a>
  My Profile: <a href="user.html">User1</a>
  <button>Edit</button>
</div>
<div class="container">
  Company website: <a href="abc.html">ABC</a>
  My Profile: <a href="user.html">User1</a>
  <button>Edit</button>
</div>
<div class="container">
  Company website: <a href="abc.html">ABC</a>
  My Profile: <a href="user.html">User1</a>
  <button>Edit</button>
</div>
<div class="container">
  Company website: <a href="abc.html">ABC</a>
  My Profile: <a href="user.html">User1</a>
  <button>Edit</button>
</div>

在每个偶数 div 中更改 link 的颜色

Change the color of the link in every even div

html

css

css-selectors

pseudo-class