a

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


Có thể sử dụng bộ chọn CSS3 không :first-of-type để chọn phần tử đầu tiên với tên lớp đã cho? 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à?

Mật mã (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>


180
2018-06-22 21:57


gốc




Các câu trả lời:


Không, không thể sử dụng chỉ một bộ chọn. Các :first-of-type pseudo-class chọn phần tử đầu tiên của nó kiểu (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)  là loại đầu tiên trong số các anh chị em của nó.

Rất tiếc, CSS không cung cấp :first-of-class bộ chọn chỉ chọn lần xuất hiện đầu tiên của một lớp. Như một giải pháp thay thế, 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 đưa ra đây và đây.


282
2018-06-22 22:00



Điều này hoạt động nếu bạn chỉ có 2 phần tử nhưng không thành công với nhiều yếu tố khác): - just Nik
Không @justNik điều này làm việc cho nhiều yếu tố. Các .myclass1 bộ chọn sẽ chọn mọi phần tử của .myclass1. Bộ chọn .myclass1 ~ .myclass1 sử dụng bộ kết hợp anh chị em chung để chọn mọi phần tử với lớp .myclass1 đó là anh chị em sau của một yếu tố với một lớp .myclass1. Điều này được giải thích chi tiết tuyệt vời đây. - WebWanderer


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

:nth-child(1 of p.myclass) 

Các bản nháp trước đã sử dụng một lớp giả mới, :nth-match(), vì vậy bạn có thể thấy cú pháp đó trong một số cuộc thảo luận về đối tượng địa lý:

:nth-match(1 of p.myclass)

Điều này đã được được triển khai trong WebKitvà do đó có sẵn trong Safari, nhưng dường như trình duyệt duy nhất hỗ trợ nó. Có vé được nộp để thực hiện nó Nháy mắt (Chrome), Gecko (Firefox)và một yêu cầu triển khai nó trong Edge, nhưng không có tiến bộ rõ ràng về bất kỳ điều nào trong số này.


39
2017-10-20 05:09



Chỉ 10 năm, và tôi có thể sử dụng nó. Mặc dù dự án mà tôi sẽ sử dụng điều này cần phải được thực hiện vào ngày mai. - Lajos Meszaros
: nth-match () đã bị loại bỏ vì lợi ích của các tính năng mới cho nth-child (), chưa được hỗ trợ tốt: caniuse.com/#feat=css-nth-child-of - nabrown78
@ nabrown78 Cảm ơn những người đứng đầu lên, cập nhật câu trả lời là hiện tại. - Brian Campbell


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

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 hoạt động, 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/


9
2017-07-26 13:56





Đây là một chuỗi cũ, nhưng tôi đang trả lờ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ả: n-child là mạnh mẽ - các dấu ngoặc đơn chấp nhận các công thức cũng như các số.

Thêm ở đây: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child


6
2018-02-22 13:16



Vâng, tôi không nghĩ rằng công trình, ít nhất là không có trong Chrome ... jsfiddle.net/YWY4L/91 - Adam Youngers
Bạn có ý gì với "bây giờ là tương lai đã đến"? Điều này chỉ hoạt động trong Safari tại thời điểm viết bài. - Alejandro García Iglesias


Đây là không phải có thể sử dụng bộ chọn CSS3 : loại đầu tiên để chọn phần tử đầu tiên có tên lớp đã cho.

Tuy nhiên, nếu phần tử được nhắm mục tiêu có một phần tử anh chị em trước đó, bạn có thể kết hợp lớp giả CSS phủ định và bộ chọn anh chị em liền kề để so khớp phần tử không có ngay phần tử trước đó với cùng tên lớp:

:not(.myclass1) + .myclass1

Ví dụ mã làm việc đầy đủ:

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>


4
2018-05-17 23:14





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

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

3
2017-10-28 14:30





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


-4
2017-11-23 14:58



:first là một lớp giả liên quan đến in ấn. - Stijn