css - 在第一个 child li 中选择类(class)

Question

所以我一直想知道我怎么能只用李的第一个 child 来上课。所以在这里它为 li 的每个元素放置了 3 个图像。但我的问题是，李的第一个 child 的位置是错误的。

.sf-menu > li > ul > li.category-thumbnail > div {
    width: 100%;
    padding-right: 100px;
    padding-top: 30px;
}
.sf-menu > li > ul > li.category-thumbnail > div:first-child {
  position: absolute;
  top: 135px;
  right: 180px !important;
  }
.sf-menu > li > ul > li.category-thumbnail > div:nth-child(2) {
  position: absolute;
  right: 180px !important;
  }
.sf-menu > li > ul > li.category-thumbnail > div:nth-child(3) {
  position: absolute;
  right: 553px !important;
  }

我想补充一点:

.sf-menu > li > ul > li:first-child.category-thumbnail > div:first-child {..}
.sf-menu > li > ul > li:first-child.category-thumbnail > div:nth-child(2) {..}
.sf-menu > li > ul > li:first-child.category-thumbnail > div:nth-child(3) {..}

预先感谢您的帮助

Answer 1

我确实相信这一点:

.sf-menu > li > ul > li.category-thumbnail > div:first-child {
  position: absolute;
  top: 135px;
  right: 180px !important;
}

以 div 的第一个子元素为目标，而不是实际的 li。

尝试这样的事情:

.sf-menu > li > ul > li.category-thumbnail:first-child > div {
  position: absolute;
  top: 135px;
  right: 180px !important;
}

或:

.sf-menu > li:first-child > ul > li.category-thumbnail > div {
  position: absolute;
  top: 135px;
  right: 180px !important;
}