时间戳

首页 > 解决方案 > 在具有多个类的嵌套 div 中访问子级

html - 在具有多个类的嵌套 div 中访问子级

问题描述

我只想为我的代码中的一个链接设置样式。我如何访问每个单独的单元格？由于有多个课程，我没有在网上发现任何类似的问题。我尝试多次使用第 n 个孩子来针对孩子的孩子的孩子，但它没有用。

编辑：我想避免使用 Javascript 或其他语言。有没有办法只使用 HTML/CSS 来做到这一点？

        <div class="grid">
            <div class="row">
              <div class="cell"></div>
              <div class="cell"></div>
              <div class="cell"></div>
            </div>
            <div class="row">
              <div class="cell"></div>
              <div class="cell"><a href="website2.com">Sample Text</a></div>
              <div class="cell"></div>
            </div>
            <div class="row">
              <div class="cell"></div>
              <div class="cell"></div>
              <div class="cell"><a href="website.com">Sample Text</a></div>
            </div>
          </div>

CSS：

.grid {
    display: table;
    float: left;
    margin-left: 25px;
    padding-top: 10px;
    border-spacing: 20px
}
.row {
    display: table-row
}
.cell {
    width: 250px;
    height: 250px;
    border: 2px solid black;
    display: table-cell;
    border-radius: 15px;
    background: #35424a;
}

.grid :nth-child(3) .row :nth-child(3) .cell :nth-child(1){
    color: #fff;
    text-decoration: none;
}

标签： htmlcssnestedparent-child

解决方案

使用nth-of-type选择器。您也可以制定nth-child基于规则的规则，但我将演示使用第n 个类型选择器。

就像是

.grid .row:nth-of-type(2) .cell a { color: red; }

对于第一个链接，然后

.grid .row:nth-of-type(3) .cell a { 颜色：绿色；}

对于第二个链接

.grid .row:nth-of-type(2) .cell a {
  color: red;
}

.grid .row:nth-of-type(3) .cell a {
  color: green;
}
        <div class="grid">
            <div class="row">
              <div class="cell"></div>
              <div class="cell"></div>
              <div class="cell"></div>
            </div>
            <div class="row">
              <div class="cell"></div>
              <div class="cell"><a href="website2.com">Sample Text</a></div>
              <div class="cell"></div>
            </div>
            <div class="row">
              <div class="cell"></div>
              <div class="cell"></div>
              <div class="cell"><a href="website.com">Sample Text</a></div>
            </div>
          </div>

推荐阅读