https://codesandbox.io/s/damp-worker-k7fj6y?file=/src/App.js
为什么是.row:nth-of-type(1) > .content:nth-of-type(4)
.内容<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/>
没有显示,所以我知道出了什么问题。
最佳答案
使用 :nth-child
psuedoselector 因为您要混合元素类型 (div
和 Link
(a
)),没有第四个链接类型元素来设置样式。
.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;
}
关于javascript - 选择链接元素并将其样式设置为第 n 种类型时,链接元素不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71887562/