Bộ chọn CSS cho phần tử đầu tiên với lớp

Tôi có một loạt các phần tử có tên lớp red, nhưng dường như tôi không thể chọn phần tử đầu tiên class="red"bằng quy tắc CSS sau:

.red:first-child {
    border: 5px solid red;
}

<p class="red"></p>
<div class="red"></div>

Điều gì là sai trong bộ chọn này và làm cách nào để sửa nó?

Nhờ các bình luận, tôi nhận ra rằng yếu tố này phải là đứa con đầu tiên của cha mẹ nó được chọn, đó không phải là trường hợp mà tôi có. Tôi có cấu trúc sau và quy tắc này thất bại như được đề cập trong các ý kiến:

.home .red:first-child {
    border: 1px solid red;
}

<div class="home">
    <span>blah</span>
    <p class="red">first</p>
    <p class="red">second</p>
    <p class="red">third</p>
    <p class="red">fourth</p>
</div>

Làm thế nào tôi có thể nhắm mục tiêu đứa trẻ đầu tiên với lớp học red?

Đây là một trong những ví dụ nổi tiếng nhất của các tác giả hiểu sai về cách thức :first-childhoạt động. Được giới thiệu trong CSS2 , lớp :first-childgiả đại diện cho đứa con đầu tiên của cha mẹ nó . Đó là nó. Có một quan niệm sai lầm rất phổ biến rằng nó chọn bất kỳ phần tử con nào là phần tử đầu tiên phù hợp với các điều kiện được chỉ định bởi phần còn lại của bộ chọn ghép. Do cách thức hoạt động của bộ chọn (xem ở đây để giải thích), điều đó đơn giản là không đúng.

Bộ chọn cấp 3 giới thiệu một :first-of-typelớp giả , đại diện cho phần tử đầu tiên trong số các anh chị em thuộc loại phần tử của nó. Câu trả lời này giải thích, với hình minh họa, sự khác biệt giữa :first-childvà :first-of-type. Tuy nhiên, như với :first-child, nó không xem xét bất kỳ điều kiện hoặc thuộc tính nào khác. Trong HTML, loại phần tử được thể hiện bằng tên thẻ. Trong câu hỏi, loại đó là p.

Thật không may, không có tương tự :first-of-class lớp giả để khớp với phần tử con đầu tiên của một lớp nhất định. Một cách giải quyết mà Lea Verou và tôi đã đưa ra cho điều này (mặc dù hoàn toàn độc lập) là trước tiên áp dụng các kiểu mong muốn của bạn cho tất cả các thành phần của bạn với lớp đó:

/* 
 * Select all .red children of .home, including the first one,
 * and give them a border.
 */
.home > .red {
    border: 1px solid red;
}

... Sau đó "hoàn tác" các kiểu cho các phần tử với lớp xuất hiện sau lớp đầu tiên , sử dụng bộ kết hợp anh chị em chung~ trong một quy tắc ghi đè:

/* 
 * Select all but the first .red child of .home,
 * and remove the border from the previous rule.
 */
.home > .red ~ .red {
    border: none;
}

Bây giờ chỉ có phần tử đầu tiên với class="red"sẽ có đường viền.

Dưới đây là một minh họa về cách áp dụng các quy tắc:

<div class="home">
  <span>blah</span>         <!-- [1] -->
  <p class="red">first</p>  <!-- [2] -->
  <p class="red">second</p> <!-- [3] -->
  <p class="red">third</p>  <!-- [3] -->
  <p class="red">fourth</p> <!-- [3] -->
</div>

1. Không có quy tắc được áp dụng; không có đường viền được hiển thị.
   Phần tử này không có lớp red, vì vậy nó bị bỏ qua.

2. Chỉ quy tắc đầu tiên được áp dụng; một đường viền màu đỏ được hiển thị.
   Phần tử này có lớp red, nhưng nó không có trước bất kỳ phần tử nào có lớp redtrong lớp mẹ của nó. Do đó, quy tắc thứ hai không được áp dụng, chỉ quy tắc thứ nhất và phần tử giữ đường viền của nó.

3. Cả hai quy tắc đều được áp dụng; không có đường viền được hiển thị.
   Phần tử này có lớp red. Nó cũng đi trước ít nhất một yếu tố khác với lớp red. Do đó, cả hai quy tắc đều được áp dụng và bordertuyên bố thứ hai ghi đè lên quy tắc thứ nhất, do đó "hoàn tác" nó, có thể nói như vậy.

Như một phần thưởng, mặc dù đã được giới thiệu trong Selector 3, bộ kết hợp anh chị em thực sự được IE7 hỗ trợ khá tốt và mới hơn, không giống như :first-of-typevà :nth-of-type()chỉ được IE9 hỗ trợ trở đi. Nếu bạn cần hỗ trợ trình duyệt tốt, bạn sẽ gặp may.

Trong thực tế, thực tế là bộ kết hợp anh chị em là thành phần quan trọng duy nhất trong kỹ thuật này, và nó có hỗ trợ trình duyệt tuyệt vời như vậy, làm cho kỹ thuật này rất linh hoạt - bạn có thể điều chỉnh nó để lọc các phần tử bằng những thứ khác, bên cạnh các bộ chọn lớp:

• Bạn có thể sử dụng điều này để giải quyết :first-of-typetrong IE7 và IE8, bằng cách cung cấp bộ chọn loại thay vì bộ chọn lớp (một lần nữa, nhiều hơn về cách sử dụng không chính xác của nó ở đây trong phần sau):

  article > p {
      /* Apply styles to article > p:first-of-type, which may or may not be :first-child */
  }
  
  article > p ~ p {
      /* Undo the above styles for every subsequent article > p */
  }

• Bạn có thể lọc theo các bộ chọn thuộc tính hoặc bất kỳ bộ chọn đơn giản nào khác thay vì các lớp.

• Bạn cũng có thể kết hợp kỹ thuật ghi đè này với các phần tử giả mặc dù các phần tử giả về mặt kỹ thuật không phải là các bộ chọn đơn giản.

Lưu ý rằng để làm việc này, bạn sẽ cần biết trước các kiểu mặc định sẽ là gì cho các phần tử anh chị em khác của bạn để bạn có thể ghi đè quy tắc đầu tiên. Ngoài ra, vì điều này liên quan đến các quy tắc ghi đè trong CSS, bạn không thể đạt được điều tương tự với một bộ chọn để sử dụng với API Selector hoặc bộ định vị CSS của Selenium .

Điều đáng nói là Selector 4 giới thiệu một phần mở rộng cho :nth-child()ký hiệu (ban đầu là một lớp giả hoàn toàn mới được gọi :nth-match()), cho phép bạn sử dụng một cái gì đó như:nth-child(1 of .red) giả thuyết .red:first-of-class. Là một đề xuất tương đối gần đây, chưa có triển khai đủ khả năng tương tác để nó có thể sử dụng được trong các trang web sản xuất. Hy vọng điều này sẽ sớm thay đổi. Trong khi đó, cách giải quyết mà tôi đề xuất nên hoạt động trong hầu hết các trường hợp.

Hãy nhớ rằng câu trả lời này giả định rằng câu hỏi đang tìm kiếm mọi phần tử con đầu tiên có một lớp nhất định. Không có lớp giả hay thậm chí là một giải pháp CSS chung cho trận đấu thứ n của một bộ chọn phức tạp trên toàn bộ tài liệu - việc một giải pháp có tồn tại hay không phụ thuộc nhiều vào cấu trúc tài liệu. jQuery cung cấp :eq(), :first, :lastvà nhiều hơn nữa cho mục đích này, nhưng lưu ý một lần nữa rằng chúng hoạt động rất khác so với :nth-child()et al . Sử dụng API chọn, bạn có thể sử dụng document.querySelector()để có được kết quả khớp đầu tiên:

var first = document.querySelector('.home > .red');

Hoặc sử dụng document.querySelectorAll()với một bộ chỉ mục để chọn bất kỳ trận đấu cụ thể:

var redElements = document.querySelectorAll('.home > .red');
var first = redElements[0];
var second = redElements[1];
// etc

Mặc dù .red:nth-of-type(1)giải pháp trong câu trả lời ban đầu được chấp nhận bởi Philip Daubmeier (vốn được viết bởi Martyn nhưng đã bị xóa từ đó), nhưng nó không hành xử theo cách bạn mong đợi.

Ví dụ: nếu bạn chỉ muốn chọn ptrong đánh dấu ban đầu của mình:

<p class="red"></p>
<div class="red"></div>

... sau đó bạn không thể sử dụng .red:first-of-type(tương đương .red:nth-of-type(1)), vì mỗi phần tử là phần tử đầu tiên (và duy nhất) của một loại ( pvà divtương ứng), do đó cả hai sẽ được khớp bởi bộ chọn.

Khi phần tử đầu tiên của một lớp nhất định cũng là phần tử đầu tiên của lớp đó, lớp giả sẽ hoạt động, nhưng điều này chỉ xảy ra do sự trùng hợp . Hành vi này được thể hiện trong câu trả lời của Philip. Thời điểm bạn dính vào một phần tử cùng loại trước phần tử này, bộ chọn sẽ thất bại. Lấy đánh dấu cập nhật:

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

Áp dụng quy tắc với .red:first-of-typesẽ hoạt động, nhưng một khi bạn thêm một quy tắc khác pmà không có lớp:

<div class="home">
  <span>blah</span>
  <p>dummy</p>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

... Bộ chọn sẽ ngay lập tức thất bại, vì .redphần tử đầu tiên bây giờ là phần tử thứ hai p .

Bộ :first-childchọn được dự định, giống như tên đã nói, để chọn con đầu tiên của thẻ cha. Các con phải được nhúng trong cùng một thẻ cha. Ví dụ chính xác của bạn sẽ hoạt động (Chỉ cần thử ở đây ):

<body>
    <p class="red">first</p>
    <div class="red">second</div>
</body>

Có lẽ bạn đã lồng các thẻ của bạn trong các thẻ cha khác nhau? Các thẻ của lớp của bạn có redthực sự là các thẻ đầu tiên theo phụ huynh không?

Cũng lưu ý rằng điều này không chỉ áp dụng cho thẻ đầu tiên như vậy trong toàn bộ tài liệu, nhưng mỗi khi có một phụ huynh mới được bao quanh nó, như:

<div>
    <p class="red">first</p>
    <div class="red">second</div>
</div>
<div>
    <p class="red">third</p>
    <div class="red">fourth</div>
</div>

firstvà thirdsẽ có màu đỏ sau đó.

Cập nhật:

Tôi không biết tại sao martyn xóa câu trả lời của mình, nhưng anh ta có giải pháp, :nth-of-typebộ chọn:

.red:nth-of-type(1)
{
    border:5px solid red;
} 

<div class="home">
    <span>blah</span>
    <p class="red">first</p>
    <p class="red">second</p>
    <p class="red">third</p>
    <p class="red">fourth</p>
</div>

Tín dụng cho Martyn . Thêm infos ví dụ ở đây . Xin lưu ý rằng đây là bộ chọn CSS 3, do đó không phải tất cả các trình duyệt sẽ nhận ra nó (ví dụ IE8 trở lên).

Đáp án đúng là:

.red:first-child, :not(.red) + .red { border:5px solid red }

Phần I: Nếu phần tử đầu tiên là cha mẹ của nó và có lớp "màu đỏ", nó sẽ có đường viền.
Phần II: Nếu phần tử ".red" không phải là đầu tiên đối với phần tử mẹ của nó, nhưng ngay sau phần tử không có lớp ".red", thì nó cũng xứng đáng với danh dự của đường viền đã nói.

Fiddle hoặc nó đã không xảy ra.

Câu trả lời của Philip Daubmeier, trong khi được chấp nhận, là không chính xác - xem fiddle đính kèm.
Câu trả lời của BoltClock sẽ hoạt động, nhưng không cần thiết phải xác định và ghi đè lên các kiểu
(đặc biệt là một vấn đề trong đó nếu không nó sẽ kế thừa một đường viền khác - bạn không muốn khai báo đường viền khác: không)

EDIT: Trong trường hợp bạn có "màu đỏ" theo sau không phải màu đỏ nhiều lần, mỗi màu đỏ "đầu tiên" sẽ có đường viền. Để ngăn chặn điều đó, người ta sẽ cần sử dụng câu trả lời của BoltClock. Xem fiddle

bạn có thể sử dụng first-of-typehoặcnth-of-type(1)

.red {
  color: green;  
}

/* .red:nth-of-type(1) */
.red:first-of-type {
  color: red;  
}

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

Các câu trả lời trên quá phức tạp.

.class:first-of-type { }

Điều này sẽ chọn loại đầu tiên của lớp. Nguồn MDN

Để khớp với bộ chọn của bạn, phần tử phải có tên lớp redvà phải là con đầu tiên của cha mẹ của nó.

<div>
    <span class="red"> <!-- MATCH -->
</div>

<div>
    <span>Blah</span>
    <p class="red"> <!-- NO MATCH -->
</div>

<div>
    <span>Blah</span>
    <div><p class="red"></div> <!-- MATCH -->
</div>

Vì các câu trả lời khác bao gồm những gì sai với nó, tôi sẽ thử nửa kia, cách khắc phục. Thật không may, tôi không biết rằng bạn có một giải pháp CSS duy nhất ở đây, ít nhất là tôi không thể nghĩ ra . Có một số tùy chọn khác mặc dù ....

1. Chỉ định một firstlớp cho phần tử khi bạn tạo nó, như thế này:

   <p class="red first"></p>
   <div class="red"></div>

   CSS:

   .first.red {
     border:5px solid red;
   }

   CSS này chỉ phù hợp với các yếu tố với cả hai first và redcác lớp.

2. Ngoài ra, hãy làm tương tự trong JavaScript, ví dụ: đây là những gì jQuery bạn sẽ sử dụng để làm điều này, sử dụng cùng một CSS như trên:

   $(".red:first").addClass("first");

Tôi có cái này trong dự án của tôi.

div > .b ~ .b:not(:first-child) {
	background: none;
}
div > .b {
    background: red;
}

<div>
      <p class="a">The first paragraph.</p>
      <p class="a">The second paragraph.</p>
      <p class="b">The third paragraph.</p>
      <p class="b">The fourth paragraph.</p>
  </div>

Theo vấn đề cập nhật của bạn

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

làm thế nào về

.home span + .red{
      border:1px solid red;
    }

Điều này sẽ chọn lớp nhà , sau đó là khoảng phần tử và cuối cùng là tất cả các phần tử .red được đặt ngay sau các phần tử span.

Tham khảo: http://www.w3schools.com/cssref/css_selector.asp

Bạn có thể sử dụng loại thứ n (1) nhưng hãy chắc chắn rằng trang web không cần hỗ trợ IE7, v.v., nếu đây là trường hợp sử dụng jQuery để thêm lớp cơ thể thì tìm phần tử qua lớp cơ thể IE7 rồi tên phần tử, sau đó thêm trong phong cách con thứ n cho nó.

Bạn có thể thay đổi mã của bạn thành một cái gì đó như thế này để làm cho nó hoạt động

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

Đây là công việc cho bạn

.home span + .red{
      border:3px solid green;
    }

Đây là một tài liệu tham khảo CSS từ SnoopCode về điều đó.

Tôi đang sử dụng CSS dưới đây để có hình nền cho danh sách ul li

#footer .module:nth-of-type(1)>.menu>li:nth-of-type(1){
  background-position: center;
  background-image: url(http://monagentvoyagessuperprix.j3.voyagesendirect.com/images/stories/images_monagentvoyagessuperprix/layout/icon-home.png);
  background-repeat: no-repeat;
}

<footer id="footer">
  <div class="module">
    <ul class="menu ">
      <li class="level1 item308 active current"></li>
      <li> </li>
    </ul> 
  </div>
  <div class="module">
    <ul class="menu "><li></li>
      <li></li> 
    </ul>
  </div>
  <div class="module">
    <ul class="menu ">
      <li></li>
      <li></li>
    </ul>
  </div>
</footer>

Thử cái này :

    .class_name > *:first-child {
        border: 1px solid red;
    }

Vì một số lý do, không có câu trả lời nào ở trên dường như đang giải quyết trường hợp của đứa con đầu tiên thực sự và duy nhất của cha mẹ.

#element_id > .class_name:first-child

Tất cả các câu trả lời ở trên sẽ thất bại nếu bạn muốn áp dụng kiểu cho chỉ đứa trẻ lớp đầu tiên trong mã này.

<aside id="element_id">
  Content
  <div class="class_name">First content that need to be styled</div>
  <div class="class_name">
    Second content that don't need to be styled
    <div>
      <div>
        <div class="class_name">deep content - no style</div>
        <div class="class_name">deep content - no style</div>
        <div>
          <div class="class_name">deep content - no style</div>
        </div>
      </div>
    </div>
  </div>
</aside>

Hãy thử đơn giản và hiệu quả

 .home > span + .red{
      border:1px solid red;
    }

Tôi tin rằng sử dụng bộ chọn tương đối + để chọn các phần tử được đặt ngay sau đó, hoạt động tốt nhất ở đây (như một số đề xuất trước đây).

Trường hợp này cũng có thể sử dụng bộ chọn này

.home p:first-of-type

nhưng đây là bộ chọn phần tử không phải là lớp một.

Tại đây bạn có danh sách các bộ chọn CSS đẹp: https://kolosek.com/css-selector/

Hãy thử giải pháp này:

 .home p:first-of-type {
  border:5px solid red;
  width:100%;
  display:block;
}

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

Liên kết CodePen