Correcting teacher:灭绝师太
Correction status:qualified
Teacher's comments:
<body>
<div class="container">
<div class="item" id="first">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item center">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</body>
body {
}
div{
}
.item {
}
.item.center{
}
#first {
}
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item center">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</body>
body div {
}
body > div {
}
.item.center + .item {
}
.item.center ~ .item {
}
场景↓
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</body>
选择第一个子元素
.container > *:first-child {
}
或者
.container > .item:first-child {
}
选择最后一个子元素
.container > :last-child {
}
选择指定个数元素,如第3个元素
.container > :nth-child(3) {
}
只选择偶数单元格元素
.container > :nth-child(2n) {
}
或者
.container > :nth-child(even) {
}
只选择奇数单元格元素
.container > :nth-child(2n-1) {
}
或者
.container > :nth-child(odd) {
}
从指定位置(如从第4个元素开始),选择剩下的所有元素
.container > .item:nth-child(n + 4) {
}
只取前几个元素(如只取前3个元素)
.container > .item:nth-child(-n + 3) {
}
只取最后几个元素(如只取最后3个元素)
.container > .item:nth-last-child(-n + 3) {
}
取倒数第几个元素(如取倒数第2个元素)
.container > .item:nth-last-child(2) {
}
场景↓
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<span class="item">4</span>
<span class="item">5</span>
<span class="item">6</span>
<span class="item">7</span>
<span class="item">8</span>
<span class="item">9</span>
</div>
</body>
选择div组中的第一个元素
.container div:first-of-type {
}
选择div组中的最后一个元素
.container div:last-of-type {
}
选择span组中的指定一个元素,如选择第3个元素
.container span:nth-of-type(3) {
}
选择span组中的前几个元素,如选择前3个元素
.container span:nth-of-type(-n + 3) {
}
选择span组中的最后几个元素,如选择最后2个元素
.container span:nth-last-of-type(-n + 3) {
}