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

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

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>

Không, không thể chỉ sử dụng một bộ chọn. Các :first-of-typepseudo-class chọn phần tử đầu tiên của nó loại ( div, p, vv). Sử dụng bộ chọn lớp (hoặc bộ chọn loại) 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 thuộc loại đã cho) và là loại đầu tiên trong số các anh chị em của nó.

Thật không may, CSS không cung cấp :first-of-classbộ chọn chỉ chọn lần xuất hiện đầu tiên của lớp. Như một cách giải quyết, 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 .

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

:nth-child(1 of p.myclass) 

Các bản nháp trước đây đã 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ề tính năng:

:nth-match(1 of p.myclass)

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

Điều này không 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ó anh chị em phần tử 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ề để khớp với phần tử không có phần tử trước đó có 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>

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

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-typehoạt động, nhưng :first-of-typekhông hoạt động.

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

Đây là một chủ đề 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ả thứ ba.

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: con mạnh mẽ - dấu ngoặc đơn chấp nhận các công thức cũng như số.

Xem thêm tại đây: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

Là một giải pháp dự phòng, bạn có thể bao bọc các lớp của mình trong một phần tử cha 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>

Không chắc làm thế nào để giải thích điều này nhưng tôi đã gặp phải một cái gì đó tương tự ngày hôm nay. Không thể thiết lập .user:first-of-type{}trong khi .user:last-of-type{}làm việc tốt. Điều này đã được sửa sau khi tôi gói chúng bên trong div mà không có lớp hay kiểu dáng nào:

https://codepen.io/adrianTNT/pen/WgEpbE

<style>
.user{
  display:block;
  background-color:#FFCC00;
}

.user:first-of-type{
  background-color:#FF0000;
}
</style>

<p>Not working while this P additional tag exists</p>

<p class="user">A</p>
<p class="user">B</p>
<p class="user">C</p>

<p>Working while inside a div:</p>

<div>
<p class="user">A</p>
<p class="user">B</p>
<p class="user">C</p>
</div>

Bạn có thể làm điều này bằng cách chọn mọi phần tử của lớp là anh chị em của cùng một lớp và đảo ngược nó, nó sẽ chọn khá nhiều phần tử trên trang, do đó bạn phải chọn lại lớp.

ví dụ:

<style>
    :not(.bar ~ .bar).bar {
        color: red;
    }
<div>
    <div class="foo"></div>
    <div class="bar"></div> <!-- Only this will be selected -->
    <div class="foo"></div>
    <div class="bar"></div>
    <div class="foo"></div>
    <div class="bar"></div>
</div>

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