nth of-type vs nth-child我有點困惑于第n個類型的偽類，以及它應該如何工作-特別是與第n個子類相比。也許我想錯了，但考慮到這個結(jié)構(gòu)<div class="row">
<div class="icon">A</div>
<div class="icon">B</div>
<div class="label">1</div>
<div class="label">2</div>
<div class="label">3</div></div>.第三個子元素(帶有類標簽的第一個元素)應該(也許？)可供選擇.row .label:nth-of-type(1) {
/* some rules */}但是，至少在這里的鉻，它沒有選擇它。它似乎只有當它是第一個孩子在行，這是相同的第n個孩子-因此，這和第n類型之間有什么區(qū)別？
3 回答
Smart貓小萌
TA貢獻1911條經(jīng)驗 獲得超7個贊
nth-child
<div> <h1>Hello</h1> <p>Paragraph</p> <p>Target</p></div>
p:nth-child(2)pp:nth-of-typepp).
div.row .label
:nth-of-type(1)div.row.icon.label
nth-of-type(3)
$(function () {
$('.row .label:first')
.css({
backgroundColor:"blue"
});});
胡說叔叔
TA貢獻1804條經(jīng)驗 獲得超8個贊
.label:nth-of-type(1)
div.labellabel.
label1
叮當貓咪
TA貢獻1776條經(jīng)驗 獲得超12個贊
<p><i><i><p>
<style>
* {
padding: 0;
margin:0;
}
section p {
width: 20px;
height: 20px;
border:solid 1px black;
border-radius: 15px;
margin:20px;
float: left;
}
section i {
width: 20px;
height: 20px;
border:solid 1px black;
border-radius: 15px;
margin:20px;
float: left;
}
section p:nth-child(1) {
background-color: green; /*first-child of p in the flow*/
}
section i:nth-child(1) {
background-color: red; /*[first-child of i in the flow]NO */
}
section i:nth-of-type(1) {
background-color: blue; /*the type i of first child in the flow*/
}
</style></head><body>
<section>
<p></p>
<p></p>
<p></p>
<p></p>
<i></i>
<p></p>
<i></i>
<p></p>
<p></p>
<p></p>
</section></body> section p:nth-child(1) {
background-color: green; /*first-child of p in the flow*/
}section i:nth-child(1) {
background-color: red; /*[first-child of i in the flow]NO */
}section i:nth-of-type(1) {
background-color: blue; /*the type i of first child in the flow*/
}添加回答
舉報
0/150
提交
取消