HTML选择问题

Question

我在我的网站上使用黄瓜运行前端测试。目前，我想点击一个div元素，如下所示

<div class=full>
<div class=half>
 <div class=product-image></div>
</div>
<div class=half>
 <div class=product-image></div>
</div>
<div class=half>
 <div class=product-image></div>
</div>
<div class=half>
 <div class=product-image></div>
</div>
</div>

我想唯一选择第一个产品图像类。你能帮忙吗？

Answer 1

这就是你想要的......

＆＃13;

＆＃13;

.product-image{
  height : 50px;
  width : 100px;
  background-color : red;
  margin : 5px;
}

.full .half:first-child .product-image{
  background-color : green;
}

＆＃13;

<div class=full>
  <div class=half>
    <div class=product-image></div>
  </div>
  <div class=half>
    <div class=product-image></div>
  </div>
  <div class=half>
    <div class=product-image></div>
  </div>
  <div class=half>
    <div class=product-image></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以这样选择：

.full > div:first-child .product-image{}

Answer 3

试试这个：

.full .half:first-child .product-image{
  ...code
}