在具有多个类的嵌套 div 中访问 child

Question

我只想设置代码中一个链接的样式。我怎样才能访问每个iduvidual细胞？我没有在网上发现任何类似的问题，因为有多个类。我尝试多次使用第 nth child 来定位 child of a child 的 child，但它没有用。

编辑：我想避免使用 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;
}

Answer 1

您可以尝试使用以下代码直接访问各个单元格，您可以根据它们的位置来区分它们（在示例中，我将前 3 个单元格着色为红色，将第二个 3 个单元格着色为绿色，并在第二个单元格中输入了文本） :

var x = document.getElementsByClassName("cell");
var i;
for (i = 0; i < x.length; i++) {
  if (i <= 2)
    x[i].style.backgroundColor = "red";
  else if (i > 2 && i <= 5)
    x[i].style.backgroundColor = "green";
    
  if (i == 1)
   x[i].innerHTML = 'I\'m the second element';
}

.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;
}

        <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>

Answer 2

使用nth-of-type 选择器。您还可以制定基于 nth-child 的规则，但我将演示如何使用 nth-of-type 选择器。

类似

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

第一个 link 然后

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

秒 link

.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>

在具有多个类的嵌套 div 中访问 child

Accessing child within nested divs with multiple classes

html

css

nested

parent-child

在具有多个 类 的嵌套 div 中访问 child

Accessing child within nested divs with multiple classes

html

css

nested

parent-child

在具有多个类的嵌套 div 中访问 child