更改每个偶数 div 中链接的颜色答案

【问题标题】：Change the color of the link in every even div更改每个偶数 div 中链接的颜色
【发布时间】：2017-04-22 21:41:21
【问题描述】：

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

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

【问题讨论】：

一个{颜色：蓝色； }
给每个 a 标签起名字然后使用它..

标签： html css css-selectors pseudo-class

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

像这样你的意思是，你使用.container:nth-child(even) 来获取所有偶数容器，然后添加a 来定位链接.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>

【讨论】：

不，不完全是，每个偶数容器中的链接都应该是红色的。
@Sunny 更新了我的答案

【解决方案3】：

这是你想要的吗？

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

【讨论】：