Link 选择元素并将其样式设置为第 n 个类型时不显示元素

Question

https://codesandbox.io/s/damp-worker-k7fj6y?file=/src/App.js

为什么 .row:nth-of-type(1) > .content:nth-of-type(4).content <Link/> 不显示？

这是一个错误吗，我是不是漏掉了什么？

import "./styles.css";
import { Link } from "react-router-dom";

export default function App() {
  return (
    <div className="App">
      <div className="row">
        {/* I dont want this div to be a Link */}
        <div className="content"></div>
        <Link to="/" className="content"></Link>
        <Link to="/" className="content"></Link>
        <Link to="/" className="content"></Link>
      </div>
      <div className="row">
        <Link to="/" className="content"></Link>
        <Link to="/" className="content"></Link>
        <Link to="/" className="content"></Link>
        <Link to="/" className="content"></Link>
      </div>
    </div>
  );
}

.App {
  height: 100vh;
  width: 100vw;
}

.row:nth-of-type(1) {
  height: 500px;
  width: 100%;
  display: grid;
  grid-template-areas:
    "a a b c"
    "a a d d";
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
}

.row:nth-of-type(1) > .content:nth-of-type(1) {
  grid-area: a;
  background-color: orange;
}
.row:nth-of-type(1) > .content:nth-of-type(2) {
  grid-area: b;
  background-color: blue;
}
.row:nth-of-type(1) > .content:nth-of-type(3) {
  grid-area: c;
  background-color: green;
}
.row:nth-of-type(1) > .content:nth-of-type(4) {
  grid-area: d;
  background-color: red;
}

我不是在寻找其他方法来实现相同的结果，我只是想问为什么第四个 <Link/> 没有显示，所以我知道出了什么问题。

Answer 1

使用 :nth-child 伪选择器，因为您正在混合元素类型 (div 和 Link (a)),没有要设置样式的第 4 个 link 类型元素。

.row:nth-of-type(1) > .content:nth-child(1) {
  grid-area: a;
  background-color: orange;
}
.row:nth-of-type(1) > .content:nth-child(2) {
  grid-area: b;
  background-color: blue;
}
.row:nth-of-type(1) > .content:nth-child(3) {
  grid-area: c;
  background-color: green;
}
.row:nth-of-type(1) > .content:nth-child(4) {
  grid-area: d;
  background-color: red;
}

Link 选择元素并将其样式设置为第 n 个类型时不显示元素

Link Element Not Displaying When Selected And Styled As nth-of-type

javascript

css

reactjs

react-router-dom