Bộ chọn CSS3: đầu tiên của loại với tên lớp?

Question

Có thể sử dụng bộ chọn CSS3 :first-of-type để chọn phần tử đầu tiên có tên lớp đã cho không? Tôi đã không thành công với bài kiểm tra của tôi vì vậy tôi nghĩ rằng nó không phải là?

Bộ luật (http://jsfiddle.net/YWY4L/):

p:first-of-type {color:blue} 
 
p.myclass1:first-of-type {color:red} 
 
.myclass2:first-of-type {color:green}

<div> 
 
    <div>This text should appear as normal</div> 
 
    <p>This text should be blue.</p> 
 
    <p class="myclass1">This text should appear red.</p> 
 
    <p class="myclass2">This text should appear green.</p> 
 
</div>

Answer 1

Không, nó không phải là có thể sử dụng chỉ là một selector. Lớp học giả :first-of-type chọn phần tử đầu tiên của số loại (div, p, v.v ...). Sử dụng bộ chọn lớp (hoặc bộ chọn kiểu) với lớp giả đó có nghĩa là chọn một phần tử nếu nó có lớp đã cho (hoặc là của kiểu đã cho) và là loại đầu tiên trong số các loại anh chị em của nó.

Thật không may, CSS không cung cấp bộ chọn :first-of-class chỉ chọn lần xuất hiện đầu tiên của một lớp học. Là một khắc phục, bạn có thể sử dụng một cái gì đó như thế này:

.myclass1 { color: red; } 
.myclass1 ~ .myclass1 { color: /* default, or inherited from parent div */; } 

Giải thích và minh họa cho cách giải quyết được cho here và here.

Answer 2

Dự thảo Bộ chọn CSS cấp 4 đề xuất thêm ngữ pháp of <other-selector> trong số :nth-child selector. Điều này sẽ cho phép bạn chọn ra đứa trẻ thứ n phù hợp với một chọn khác được đưa ra:

:nth-child(1 of p.myclass) 

dự thảo trước sử dụng một pseudo-class mới, :nth-match(), vì vậy bạn có thể thấy cú pháp rằng trong một số cuộc thảo luận của các tính năng:

:nth-match(1 of p.myclass) 

này hiện đã được implemented in WebKit, và vì thế có sẵn trong Safari, nhưng điều đó dường như là the only browser that supports it. Có vé được nộp để thực hiện nó Blink (Chrome), Gecko (Firefox) và request to implement it in Edge, nhưng không có tiến bộ rõ ràng về bất kỳ điều nào trong số này.

Answer 3

Là một giải pháp dự phòng, bạn có thể bọc lớp học của bạn trong một phần tử cha mẹ như thế này:

<div> 
    <div>This text should appear as normal</div> 
    <p>This text should be blue.</p> 
    <div> 
     <!-- first-child/first-of-type starts from here --> 
     <p class="myclass1">This text should appear red.</p> 
     <p class="myclass2">This text should appear green.</p> 
    </div> 
</div> 

Answer 4

Tôi tìm thấy một giải pháp để bạn tham khảo. từ một số divs nhóm chọn từ nhóm hai cùng lớp divs là người đầu tiên một

p[class*="myclass"]:not(:last-of-type) {color:red} 
p[class*="myclass"]:last-of-type {color:green} 

BTW, tôi không biết tại sao :last-of-type công trình, nhưng :first-of-type không hoạt động.

thí nghiệm của tôi trên jsfiddle ... https://jsfiddle.net/aspanoz/m1sg4496/

Answer 5

Đơn giản chỉ cần: đầu tiên làm việc cho tôi, tại sao isnt này đề cập chưa?

Answer 6

Đây là một chuỗi cũ nhưng tôi đang phản hồi vì nó vẫn xuất hiện cao trong danh sách kết quả tìm kiếm. Bây giờ tương lai đã đến, bạn có thể sử dụng bộ chọn giả: n-child.

p:nth-child(1) { color: blue; } 
p.myclass1:nth-child(1) { color: red; } 
p.myclass2:nth-child(1) { color: green; } 

Bộ chọn giả: thứ n là mạnh - dấu ngoặc đơn chấp nhận công thức cũng như số.

More đây: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

Answer 7

này nó không thể sử dụng CSS3 selector : thứ nhất-of-type để chọn phần tử đầu tiên với một tên lớp nhất định.

Tuy nhiên, nếu các yếu tố nhắm mục tiêu có anh chị em ruột yếu tố trước đó, bạn có thể kết hợp negation CSS pseudo-class và adjacent sibling selectors để phù hợp với một yếu tố mà không ngay lập tức có một yếu tố trước đó với tên lớp giống nhau:

:not(.myclass1) + .myclass1 

Full mã ví dụ làm việc:

p:first-of-type {color:blue} 
 
p:not(.myclass1) + .myclass1 { color: red } 
 
p:not(.myclass2) + .myclass2 { color: green }

<div> 
 
    <div>This text should appear as normal</div> 
 
    <p>This text should be blue.</p> 
 
    <p class="myclass1">This text should appear red.</p> 
 
    <p class="myclass2">This text should appear green.</p> 
 
</div>