不使用nth-child(x)更改嵌套元素的颜色

loading...


0

我正在显示解析json文件的循环结果 . 我可以使用:nth-child(x)更改每个元素的背景颜色 . 但是,我无法使用此方法更改每个元素内部 Headers 的颜色 . 在这种情况下,我想将h4“ROADMAP”颜色与卡片颜色相匹配 .

CSS

.displayResult{
  border: 2px solid black;
  border-radius: 10px;
  background-color: orange;
}

.card-title{
  display: flex;
  padding: 1em 1em 0em 1em;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 0px;
}

.details-hidden{
  display: flex;
  padding: 1em;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  margin-top: 0px;
}

.details-hidden h4{
border: 2px solid black;
  border-width: 2px 0px;
  width: 100%;
  text-align: center;
  padding: 1em;
  background-color: black;
  color: orange;
  margin-top: 0px
}

.details-hidden h5{
border: 2px solid black;
  border-width: 2px 0px;
  width: 20%;
  text-align: center;
  padding: 0.8em;
  margin: 0px;
}

ul{
   list-style: none;
  padding: 0;
}

li{
  padding: 0.1em;
}


.displayResult:nth-child(2){
  background-color: #5cd65c;
}

.details-visible{
  display: flex;
  padding: 1em;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
}

HTML

<head><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<div class="displayResult">
<div class="card-title">
  <h4>BY TRAIN</h4>
    <p><i class="fa fa-clock-o" style="font-size:15px"></i> <b>02H26</b></p>
  <p><b>$ 210</b></p>
    <p>i</p>
 </div>

  <div class="details-hidden">
    <h4>ROADMAP</h4>
  <h5>TRAIN (02H26)</h5>
  <ul>
    <li>Paris Nord Eurostar</li>
    <li>Paris Nord Eurostar</li>
    <li>Paris Nord Eurostar</li>
     <li><b>MOSCOW<b></li>
   </ul>
    </div>
     <button>*</button>
  </div>


  <div class="displayResult">
<div class="card-title">
  <h4>BY BOAT</h4>
    <p><i class="fa fa-clock-o" style="font-size:15px"></i> <b>10H26</b></p>
  <p><b>$ 210</b></p>
    <p>i</p>
 </div>

  <div class="details-hidden">
    <h4>ROADMAP</h4>
  <h5>BOAT (02H26)</h5>
  <ul>
    <li>boat</li>
     <li><b>MOSCOW<b></li>
   </ul>
    </div>
     <button>*</button>
  </div>

JS

var btn = document.querySelector("button")
var details = document.querySelector(".details-hidden")

btn.onclick = function(){
  details.classList.add("details-visible");
  details.classList.remove("details-hidden");
}

Codepen Link

第一个“路线图”应该是绿色,第二个橙色等 .

因为我永远不知道会收到多少结果,所以我无法对新课程进行硬编码 . 由于类似于nth-child方法的东西,我必须改变颜色 .

loading...

0回答

No Data

评论

暂时没有评论!