偶数 div ごとにリンクの色を変更する

debugcn 投稿 Dev

晴れ

表示する情報を含む一連の 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>

いろP

これらの 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>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]