Bộ chọn con đầu tiên của CSS không hoạt động

Các ". không phải(. bộ chọn con đầu tiên)” xác định quy tắc không chọn con đầu tiên của thẻ cha. Bộ chọn này sẽ giúp chúng tôi loại trừ kiểu CSS được áp dụng cho phần tử đầu tiên

Hãy lấy một ví dụ đơn giản và tìm hiểu cách chúng ta có thể áp dụng bộ chọn để không chọn phần tử con đầu tiên

Thí dụ

Dưới đây là ba văn bản neo trên trang của chúng tôi có màu xanh lá cây. Hãy chỉ loại trừ màu xanh lá cây cho phần tử văn bản đầu tiên

We have specified the anchor tag “” in the “” of your HTML file:

< a > Liên kết đầu tiên của tôi a> <br>
<a>My Second Linka> <br>
<a>My Third Linka>

Tiếp theo, sử dụng thẻ cha là “body” và thẻ con là “a” cùng với “. không phải(. bộ chọn con đầu lòng))” trong biểu định kiểu. Sau đó, thêm thuộc tính CSS “color” với giá trị “green”;

< kiểu dáng >
body a. không ( . con đầu lòng ) {
color. màu xanh lá cây;
}
kiểu dáng >

Bây giờ, hãy lưu mã đã thêm và mở nó trong trình duyệt đơn giản hoặc sử dụng Live Server

Như bạn có thể thấy, chúng tôi chỉ áp dụng màu cho tất cả các phần tử ngoại trừ phần tử đầu tiên

Phương pháp 2. Sử dụng. không phải(. nth-of-type(1)) để không chọn Con đầu lòng

Cái “không (. bộ chọn nth-of-type())” cho phép bạn chọn một hoặc nhiều phần tử trong chuỗi. Giá như (. nth-of-type(1)) được sử dụng, bộ chọn sẽ chọn phần tử con đầu tiên; . not được đặt trước nó, con đầu tiên sẽ bị loại trừ

Hãy làm sáng tỏ. không phải(. khái niệm nth-of-type(1)) sử dụng ví dụ dưới đây

Thí dụ

Ở đây, chúng ta sẽ thiết lập “not(. bộ chọn loại thứ n(1))”, trong đó “1” biểu thị rằng phần tử con đầu tiên sẽ bị loại trừ. Tiếp theo, gán thuộc tính “color” giá trị “orange”

< kiểu dáng >
body a. không ( . loại thứ n (1)) {
color: orange;
}
kiểu dáng >

đầu ra

Phương pháp 3. Sử dụng. không phải(. first-of-type) để không chọn Con đầu lòng

Các (. bộ chọn loại đầu tiên) sẽ khớp với lần xuất hiện đầu tiên của một phần tử và. not được thêm vào sau nó là “. không phải(. first-of-type)” để bỏ qua lần xuất hiện đầu tiên

Thí dụ

Trong ví dụ này, “. không phải(. first-of-type)” sẽ được áp dụng để loại trừ phần tử con đầu tiên của cha mẹ nó. Sau đó, đặt giá trị “blue” cho thuộc tính “color”

< kiểu dáng >
body a. không ( . loại đầu tiên ) {
màu. xanh da trời;
}
kiểu dáng >

Chúng tôi đã cung cấp cho bạn các mẹo về cách không chọn con đầu tiên thành công

Phần kết luận

Để không chọn con đầu tiên, hãy sử dụng “. không phải(. con đầu lòng)”, “. không phải(. loại thứ n(1))” hoặc “. không phải(. bộ chọn loại đầu tiên)”. không sử dụng. không, những bộ chọn này sẽ chỉ chọn phần tử con đầu tiên và bỏ qua những phần tử khác. Tuy nhiên, khi. not được đặt trước các bộ chọn này, sau đó nó sẽ bị ràng buộc chỉ bỏ qua phần tử con đầu tiên của phần tử cha của nó. Trong bài viết này, chúng tôi đã đề cập đến ba phương pháp hiệu quả để không chọn phần tử con đầu tiên trong CSS

  
First paragraph...
  
Lorem ipsum...
  
Dolor sit amet...
  
Consectetur adipisicing...

p:first-child {
  font-size: 1.5em;
}

p:first-child {
  font-size: 1.5em;
}

p:first-child {
  font-size: 1.5em;
}

p:first-child {
  font-size: 1.5em;
}

p:first-child {
  font-size: 1.5em;
}

p:first-child {
  font-size: 1.5em;
}

Check out this Pen!

Các nguồn lực khác

• Có quan hệ với. đứa con cuối cùng, loại đầu tiên,. cuối cùng của loại
• Tài liệu Mozilla

Hỗ trợ trình duyệt

:first-child đã được giới thiệu trong Bộ chọn CSS Mô-đun 3, có nghĩa là các phiên bản trình duyệt cũ không hỗ trợ nó. Tuy nhiên, hỗ trợ trình duyệt hiện đại là hoàn hảo và bộ chọn giả mới được sử dụng rộng rãi trong môi trường sản xuất. Nếu bạn yêu cầu hỗ trợ trình duyệt cũ hơn, hãy điền đầy đủ cho IE hoặc sử dụng các bộ chọn này theo những cách không quan trọng, đó là cải tiến liên tục, được khuyến nghị

Cách sử dụng đầu tiên

Làm thế nào để CSS đầu tiên

Tại sao đứa trẻ cuối cùng không hoạt động CSS?