在 data-ng-repeat 上使用 nth-child() [重复]

Question

我正在尝试更改 data-ng-repeat 函数的图像，但我没有完全访问权限。我尝试了 nth-child() 方法，但只向我展示了所有重复的第一张图像。我有 9 个重复值，但在所有 9 个上显示相同的图像，希望你能帮助我。谢谢

Results

.imgforcat img:nth-child(1) {background: url("https://res.cloudinary.com/ordering2/image/upload/v1613955412/vjdipw4kr8vkxb0mtgzu.png");height: 74px;background-position: center;background-repeat: no-repeat;background-size: cover;position: relative;width: 74px;border-radius: 17px;border: 0 !important;box-shadow: 1px 2px 7px #76848e6b;}
.imgforcat img:nth-child(2) {background: url("https://res.cloudinary.com/ordering2/image/upload/v1613955414/ybytihuolboqyipaomth.png");height: 74px;background-position: center;background-repeat: no-repeat;background-size: cover;position: relative;width: 74px;border-radius: 17px;border: 0 !important;box-shadow: 1px 2px 7px #76848e6b;}
.imgforcat img:nth-child(3) {background: url("https://res.cloudinary.com/ordering2/image/upload/v1613955417/wcurk4xxzkuhkcb4kfyk.png");height: 74px;background-position: center;background-repeat: no-repeat;background-size: cover;position: relative;width: 74px;border-radius: 17px;border: 0 !important;box-shadow: 1px 2px 7px #76848e6b;}
.imgforcat img:nth-child(4) {background: url("https://res.cloudinary.com/ordering2/image/upload/v1613955420/qzqsnfu16ksmgciczp0i.png");height: 74px;background-position: center;background-repeat: no-repeat;background-size: cover;position: relative;width: 74px;border-radius: 17px;border: 0 !important;box-shadow: 1px 2px 7px #76848e6b;}
.imgforcat img:nth-child(5) {background: url("https://res.cloudinary.com/ordering2/image/upload/v1613955423/i89yd4gygnfobtkt5sst.png");height: 74px;background-position: center;background-repeat: no-repeat;background-size: cover;position: relative;width: 74px;border-radius: 17px;border: 0 !important;box-shadow: 1px 2px 7px #76848e6b;}
.imgforcat img:nth-child(6) {background: url("https://res.cloudinary.com/ordering2/image/upload/v1613955426/bibll3zypbxobjvqwa7i.png");height: 74px;background-position: center;background-repeat: no-repeat;background-size: cover;position: relative;width: 74px;border-radius: 17px;border: 0 !important;box-shadow: 1px 2px 7px #76848e6b;}
.imgforcat img:nth-child(7) {background: url("https://res.cloudinary.com/ordering2/image/upload/v1613955429/mabhmve6oamdpanpw7vj.png");height: 74px;background-position: center;background-repeat: no-repeat;background-size: cover;position: relative;width: 74px;border-radius: 17px;border: 0 !important;box-shadow: 1px 2px 7px #76848e6b;}
.imgforcat img:nth-child(8) {background: url("https://res.cloudinary.com/ordering2/image/upload/v1613955433/jrjzziz0ytkzbg5zgsiu.png");height: 74px;background-position: center;background-repeat: no-repeat;background-size: cover;position: relative;width: 74px;border-radius: 17px;border: 0 !important;box-shadow: 1px 2px 7px #76848e6b;}
.imgforcat img:nth-child(9) {background: url("https://res.cloudinary.com/ordering2/image/upload/v1613955436/xrwinousjczidyswesls.png");height: 74px;background-position: center;background-repeat: no-repeat;background-size: cover;position: relative;width: 74px;border-radius: 17px;border: 0 !important;box-shadow: 1px 2px 7px #76848e6b;}
.imgforcat img:nth-child(10) {background: url("https://res.cloudinary.com/ordering2/image/upload/v1613955439/bnrvfukc9fcj2ii8vjkt.png");height: 74px;background-position: center;background-repeat: no-repeat;background-size: cover;position: relative;width: 74px;border-radius: 17px;border: 0 !important;box-shadow: 1px 2px 7px #76848e6b;}
.imgforcat img:nth-child(11) {background: url("https://res.cloudinary.com/ordering2/image/upload/v1613955442/x6qsfdkndd57v6ihhkqk.png");height: 74px;background-position: center;background-repeat: no-repeat;background-size: cover;position: relative;width: 74px;border-radius: 17px;border: 0 !important;box-shadow: 1px 2px 7px #76848e6b;}

<div data-ng-repeat="btypes in allbusinesstypes | orderBy:'id*1'" style="width: 25%;height: 125px;float: left;text-align: center;">
              <a class="imgforcat" href="#" ng-class="{'active': filterBusinessType == btypes.name}" ng-click="selectChangeBusinessType($event, btypes)" style="text-decoration: none;color: #333333;"><img height="350" width="400">{{btypes.name}}</a>
            </div>

Answer 1

The documentation 说：

:nth-child() CSS 伪类根据元素在一组兄弟元素中的位置匹配元素。

在您的情况下，当您在 css 中写入 .imgforcat img:nth-child(n) 时，您会尝试匹配 .imgforcat 内的 img 兄弟标签，这意味着类似的东西：

<div class="imgforcat">
    <img src="">
    <img src="">
    <img src="">
</div>

你应该尝试匹配你的父母，然后在.imgforcat上使用:nth-child（我假设你所有的imgforcat都是同一个父母.parent的兄弟姐妹和孩子

.parent .imgforcat:nth-child(1) img {}
.parent .imgforcat:nth-child(2) img {}
...