Question

我有一个css网格，我试图在父'包装'的第二个'box'子项上创建不同的行为。在Chrome中进行检查时，所有.box CSS和.box：nth-child（2）

的CSS都会被选中。

使用.box img

获取所有img标签的CSS

但是，它没有拿起box:nth-child(2) img

这是我的HTML：

<div class="wrapper" style="height:685px">
  <div class="box">
    <a href="">
      <div>
        <img src="">
        <div class="clickableItem"><span style="font-size: 140%">Trolley Setup</span></div>
      </div>
    </a>
  </div>
  <div class="box">
    ...
  </div>
  <div class="box">
    ...
  </div>
</div>

我的CSS：

.wrapper:nth-child {
  width: calc( 100% / 3 );
}

.box  {
  background-color: #1786B8;
  color: #fff;
  border-radius:10px;
  -webkit-box-shadow: -3px 3px 6px #4c4b4b;
  -moz-box-shadow: -3px 3px 6px #4c4b4b;
  box-shadow: -3px 3px 6px #4c4b4b;
  align-self: stretch;
  display:flex;
  align-items:center;
  justify-content:center;
}

.box img {
  width: 120px;
  float:left;
  margin-left:20px;
}

.box a {
  width: 100%;
  height: 100%;
}

.box a div {
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
}


.box:nth-child(2) {
  grid-column: 2;
  grid-row: 1 / 3;
  font-size:150%;
}

.box:nth-child(2) img {
  float:none;
}

.box:nth-child(3) {
  grid-column: 3;
  grid-row: 1;
}
.box:nth-child(4) {
  grid-column: 1;
  grid-row: 2;
}

知道我做错了吗？

我也尝试过：.box:nth-child(2) a div img

Answer 1

这条规则......

.box a div {
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
}

...让您的所有img元素都展现为儿童（因为他们是使用该规则解决的元素的直接子元素），因此float设置不会影响其中任何一个。这就是为什么第二个孩子和其他孩子的形象没有区别的原因。

img里面的div的nth-child没有显示css

1 个答案: