Question

我添加了nth-child(odd)，但是所有流行频道的背景都更改了idk，为什么。

我要更改的是奇怪的流行频道divs背景颜色

注意：弹出频道为div

.pop-channel:nth-child(odd) {
    background-color:#5f6769;
}

https://jsfiddle.net/xLn91qj4/3/

Answer 1

您在错误的课堂上添加了nth-child。 div.pop-channel总是很奇怪，因为它位于a标记内。

它必须带有a标签，如下所示：

a:nth-child(odd) .pop-channel {
  background-color: #5f6769;
}

工作片段：

.channel-suggestions {
  clear: both;
  display: inline-block;
  float: right;
  width: 150px;
  border: 1px solid black;
  height: 315px;
  overflow-y: auto;
  box-sizing: border-box;
  max-width: 100%;
}

.pop-channel {
  border: 1px solid gray;
  padding: 10px 0px;
}

a:nth-child(odd) .pop-channel {
  background-color: #5f6769;
}

.program-bilgi {
  margin-top: 3px;
  clear: both;
  width: 60%;
  height: 40px;
  border: 2px solid #ffd700;
  background-color: lightgray;
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  position: relative;
}

.program-bilgi .program {
  font-weight: bold;
  font-size: 24px;
  color: #333333;
  line-height: 30px;
}

.program::before {
  color: #512c96;
  content: "Canlı";
  position: absolute;
  left: 1px;
  border: 3px solid #42b883;
  border-radius: 4px;
}

.program-bilgi .program-aciklama {
  display: block;
  margin-top: 40px;
  border: 1px solid black;
}

.pop-channel img {
  max-width: 24px;
  max-height: 24px;
  vertical-align: text-bottom;
  margin-right: 7px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Canlı TV İzle</title>
  <link href="https://fonts.googleapis.com/css?family=Righteous&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="../css/style.css">
  <link rel="stylesheet" href="../css/kanal.css">
  <link href="../css/video-js.css" rel="stylesheet">
  <script src='https://vjs.zencdn.net/7.6.5/video.js'></script>
</head>

<body>
  <aside class="channel-suggestions">
    <a href='/izle/trt-1.php'>
      <div class='pop-channel'><img src='../assets/trt-1.png'>TRT 1</div>
    </a>
    <a href='/izle/trt-haber.php'>
      <div class='pop-channel'><img src='../assets/trt-haber.png'>TRT Haber</div>
    </a>
    <a href='/izle/atv.php'>
      <div class='pop-channel'><img src='../assets/atv.png'>Atv</div>
    </a>
    <a href='/izle/kanal-d.php'>
      <div class='pop-channel'><img src='../assets/kanal-d.png'>Kanal D</div>
    </a>
    <a href='/izle/show-tv.php'>
      <div class='pop-channel'><img src='../assets/show-tv.png'>Show TV</div>
    </a>
    <a href='/izle/tv-8.php'>
      <div class='pop-channel'><img src='../assets/tv-8.png'>TV8</div>
    </a>
    <a href='/izle/fox-tv.php'>
      <div class='pop-channel'><img src='../assets/fox-tv.png'>Fox TV</div>
    </a>
    <a href='/izle/haberturk.php'>
      <div class='pop-channel'><img src='../assets/haberturk.png'>HaberTürk</div>
    </a>
    <a href='/izle/ntv.php'>
      <div class='pop-channel'><img src='../assets/ntv.png'>NTV</div>
    </a>
    <a href='/izle/a-haber.php'>
      <div class='pop-channel'><img src='../assets/a-haber.png'>A Haber</div>
    </a>
    <a href='/izle/trt-spor.php'>
      <div class='pop-channel'><img src='../assets/trt-spor.png'>TRT Spor</div>
    </a>
    <a href='/izle/a-spor.php'>
      <div class='pop-channel'><img src='../assets/a-spor.png'>A Spor</div>
    </a>
  </aside>
</body>

</html>

Answer 2

我已经创建了您的代码段。在这里工作正常：

.pop-channel {
    background-color:#ccc;
    width:100px;
    height:100px;
}
.pop-channel:nth-child(odd) {
    background-color:#5f6769;
}

<div class="pop-channel"></div>
<div class="pop-channel"></div>
<div class="pop-channel"></div>
<div class="pop-channel"></div>
<div class="pop-channel"></div>
<div class="pop-channel"></div>

新台币子不正常工作如何解决

2 个答案: