Tôi hơi bối rối về lớp giả loại thứ n, và cách thức này được cho là hoạt động - đặc biệt khi so sánh với lớp thứ n-con.nth-of-type vs nth-child

Có lẽ tôi có ý tưởng sai lầm, nhưng với cấu trúc này

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

..the phần tử con thứ ba (lần đầu tiên với nhãn lớp) nên (có lẽ?) Có thể lựa chọn với

.row .label:nth-of-type(1) { 
    /* some rules */ 
}

Tuy nhiên , ít nhất trong chrome ở đây, nó không chọn nó. Nó chỉ xuất hiện để làm việc nếu nó là đứa trẻ đầu tiên trong hàng, đó là giống như nth-child - do đó, sự khác biệt giữa điều này và thứ n-of-type là gì?

Nguồn

2012-02-16 dmp

Tôi tự hỏi nơi tất cả điều này sẽ phá vỡ (IE8 và các năm trước cho chắc chắn) –

IE8 và thấp hơn chắc chắn không hỗ trợ nó, nhưng hầu như tất cả mọi thứ khác chỉ là tốt (bao gồm IE9) – dmp

Các nth-child pseudo-class dùng để chỉ "thứ N xuất hiện phần tử con", có nghĩa là nếu bạn có một cấu trúc như sau:

<div> 
    <h1>Hello</h1> 

    <p>Paragraph</p> 

    <p>Target</p> 
</div>

Sau đó p:nth-child(2) sẽ chọn đứa con thứ hai cũng là ap (cụ thể là, p với "Đoạn").
p:nth-of-type sẽ chọn thứ hai phù hợp với p yếu tố, (cụ thể là mục tiêu p) của chúng tôi.

Here's a great article on the subject by Chris Coyier @ CSS-Tricks.com

Lý do bạn phá vỡ là vì loại dùng để chỉ các loại phần tử (cụ thể là, div), nhưng div đầu tiên không phù hợp với các quy tắc mà bạn đề cập (.row .label), do đó quy tắc không áp dụng.

Lý do là, CSS is parsed right to left, có nghĩa là trình duyệt đầu tiên trông trên :nth-of-type(1), xác định nó tìm kiếm một phần tử của kiểu div, cũng là người đầu tiên thuộc loại này, phù hợp với các yếu tố .row, và đầu tiên, .icon phần tử. Sau đó, nó đọc rằng các phần tử nên có các lớp học .label, mà không phù hợp với những gì ở trên.

Nếu bạn muốn chọn yếu tố nhãn đầu tiên, bạn cần phải quấn tất cả các nhãn trong vùng chứa của riêng mình hoặc chỉ cần sử dụng nth-of-type(3) (giả sử sẽ luôn có 2 biểu tượng).

Một tùy chọn khác, sẽ (đáng buồn) là sử dụng ... hãy chờ ...jQuery:

$(function() { 
    $('.row .label:first') 
     .css({ 
      backgroundColor:"blue" 
     }); 
});

Nguồn

2012-02-16 15:25:48

.label:nth-of-type(1)

"loại" ở đây đề cập đến loại phần tử. Trong trường hợp này, div, không phải cho lớp học. Điều này không có nghĩa là phần tử đầu tiên là .label, thay vào đó nó có nghĩa là phần tử đầu tiên thuộc loại của nó cũng có một lớp là label.

Không có yếu tố nào có loại label có chỉ số 1 loại của chúng.

Nguồn

2012-02-16 15:18:21

Tại sao địa ngục chúng ta không có 'nth-class' sau 4 năm? – deathlock

enter image description here

trong hình ra khỏi thêm 10 yếu tố, 8 là <p> và 2 là <i>, hai yếu tố phần bóng mờ được chỉ ra <i> còn lại tám <p>

css cho trang ở đây:

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

bóng đèn xanh đầu tiên chỉ ra

section p:nth-child(1) { 
       background-color: green; /*first-child of p in the flow*/ 
      }

và bóng đèn đỏ thứ hai trong các mã không hoạt động, vì tôi không phải là yếu tố đầu tiên trong dòng chảy

section i:nth-child(1) { 
      background-color: red; /*[first-child of i in the flow]NO */ 
     }

và bóng đèn màu xanh trong hình chỉ ra loại đầu tiên của tôi trong dòng chảy

section i:nth-of-type(1) { 
      background-color: blue; /*the type i of first child in the flow*/ 
     }

Nguồn

2014-04-25 12:13:09 anand

ở đây là jsfiddle http://jsfiddle.net/anandw3c/4WBMa/ – anand

:nth-of-type được sử dụng để chọn một em ruột của người đặc biệt loại. Bằng cách loại I có nghĩa là một loại thẻ như trong <li>, <img>, <div>, vv

:nth-child được sử dụng để chọn người con của một thẻ cha mẹ đặc biệt mà không quan tâm đến một loại

Ví dụ về :nth-of-type

HMTL:

<ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    <li>Item 5</li> 
    <li>Item 6</li> 
    <li>Item 7</li> 
    <li>Item 8</li> 
    <li>Item 9</li> 
    <li>Item 10</li> 
    <li>Item 11</li> 
    <li>Item 12</li> 
    <li>Item 13</li> 
    <li>Item 14</li> 
    <li>Item 15</li> 
    <li>Item 16</li> 
    </ul>

CSS:

Lưu ý rằng không có khoảng trắng giữa thẻ <li> và lớp giả nth-of-type.

li:nth-of-type(odd) { background-color: #ccc; }

Kết quả: https://jsfiddle.net/79t7y24x/

Ví dụ về :nth-child

HTML:

<ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    <li>Item 5</li> 
    <li>Item 6</li> 
    <li>Item 7</li> 
    <li>Item 8</li> 
    <li>Item 9</li> 
    <li>Item 10</li> 
    <li>Item 11</li> 
    <li>Item 12</li> 
    <li>Item 13</li> 
    <li>Item 14</li> 
    <li>Item 15</li> 
    <li>Item 16</li> 
    </ul>

CSS:

Chú ý ở đây rằng có tôi s một khoảng trống giữa <ul> thẻ và :nth-child pseudo-class

ul :nth-child(even) { background-color: red }

Kết quả: https://jsfiddle.net/o3v63uo7/

Nguồn

2016-03-01 23:13:16

Heres là một ví dụ đơn giản trong đó cho thấy sự khác biệt giữa thứ n con vs nth-of-type.

Cân nhắc html sau

<div> 
<p>I am first</p> 
<div>I am secong</div> 
<p>I am 3rd</p> 
</div>

Sử dụng thứ n-of-con

p:nth-of-child(2){ 
    background:red; 
}

Các nền đỏ sẽ được áp dụng cho các nguyên tố p 2 bên trong div.

Điều này xảy ra bởi vì thứ n-of-con bascially nghĩa để tìm p thẻ thứ n (trong p thẻ trường hợp thứ 2 này) bên trong một container

Sử dụng thứ n con

p:nth-child(2){ 
    background:red; 
}

Ở đây không có css được áp dụng .

Điều này xảy ra bởi vì thứ n con về cơ bản có nghĩa là để tìm thẻ thứ n bên trong một container (trong trường hợp này thẻ thứ 2 là div) và kiểm tra xem nó là p thẻ

Nguồn

2017-06-11 10:51:04 prajnavantha

Dưới đây là một ví dụ:

<div> 
    <div >0</div> 
    <div >1</div> 
    <div >2</div> 
    <div >3</div> 
    <div >4</div> 
    <div >5</div> 
</div>

bộ chọn này: div div:nth-child(1) sẽ chọn con đầu tiên của div nhưng với điều kiện khác con phải là div. con đầu tiên ở đây là <div>0</div> nhưng nếu đứa con đầu tiên là một đoạn p: <p>0</p>, công cụ chọn này sẽ không ảnh hưởng đến trang vì không có con đầu tiên là div đứa con đầu tiên là p.

nhưng chọn này: div div:nth-of-type(1) nếu đứa con đầu lòng là một <div>0</div> sẽ ảnh hưởng đến nó, nhưng nếu đứa con đầu lòng là <p>0</p> bây giờ anh sẽ ảnh hưởng đến đứa con thứ hai <div>1</div> bởi vì đó là đứa con đầu lòng của mình loại div.

Nguồn

2017-10-18 11:45:19 Cherif

element:nth-of-type(p) //p=integer , basically return the DOM Element with respect of body. 
Let us understand this with an example 



    <html> 
     <head> 
     </head> 
     <body> 
      <div> 
      <p> This is paragraph in first div</p> 
      <input type="text" placeholder="Enter something"/> 
      <p>This is a paragraph </p> 
      </div> 
      <div> 
      <p>This is paragraph in second div</p> 
      <ul> 
      <li>First Item</li> 
      <li>Second Item</li> 
      <li> 
      <label> This is label <strong>inside Unordered List</strong></label> 
      </li> 

      </ul> 

      </div> 
     </body> 
    </html> 


**This above html will look like this.**

Now suppose We have to style Second Item in UnOrderd list. 
In this case we can use nth-of-type(index) selector wrt DOM body. 

we can achieve styling like this 

<style type="text/css"> 
       div:nth-of-type(2) li:nth-of-type(2){ 
        color: red; 
        font-weight: bold; 
       } 
      </style> 

explanation : div:nth-of-type(2) by this we are trying to tell find the second div in html body,after that we have second div accessible ,now we can dig inside div using same nth-of-type selector,next we are using li:nth-of-type(2) so now we can find second list inside second div and styling it . 

Final Code : 



    <html> 
      <head> 
       <style type="text/css"> 
        div:nth-of-type(2) li:nth-of-type(2){ 
         color: red; 
         font-weight: bold; 
        } 
       </style> 
      </head> 
      <body> 
       <div> 
       <p> This is paragraph in first div</p> 
       <input type="text" placeholder="Enter something"/> 
       <p>This is a paragraph </p> 
       </div> 
       <div> 
       <p>This is paragraph in second div</p> 
       <ul> 
       <li>First Item</li> 
       <li>Second Item</li> 
       <li> 
       <label> This is label <strong>inside Unordered List</strong></label> 
       </li> 

       </ul> 

       </div> 
      </body> 
     </html> 

**And Final output will look like this**

Nguồn

2018-01-19 12:23:36 IMRA

nth-of-type vs nth-child

Trả lời

Cân nhắc html sau

Sử dụng thứ n-of-con

Sử dụng thứ n con

Các vấn đề liên quan