Làm cách nào để chỉ áp dụng CSS cho đứa con đầu lòng?

Lớp giả :first-child có nghĩa là "nếu phần tử này là con đầu tiên của cha mẹ nó". :last-child có nghĩa là "nếu phần tử này là phần tử con cuối cùng của cha mẹ nó". Lưu ý rằng chỉ tính các nút phần tử (thẻ HTML), các lớp giả này bỏ qua các nút văn bản

Giấy làm bài

div#test p:first-child {text-decoration: underline;}
div#test p:last-child {color: red;}

Đây là div id="test". Đoạn đầu tiên nên được gạch chân;

Đoạn đầu tiên

Đoạn thứ hai

Năng động

Điều gì xảy ra khi chúng ta tự động thêm đoạn văn vào div?

Các ". không(. 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

Ví 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 > Liên kết thứ hai của tôi a> <br>
< a > Liên kết thứ ba của tôi a>

Tiếp theo, sử dụng thẻ cha là “body” và thẻ con là “a” cùng với “. không(. 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 >
body a. không ( . con đầu lòng ) {
màu sắc. màu xanh lá;
}
kiểu>style>

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(. 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(. khái niệm nth-of-type(1)) sử dụng ví dụ dưới đây

Ví 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 >
body a. không ( . loại thứ n (1)) {
màu sắc. quả cam;
}
kiểu>style>

đầu ra

Phương pháp 3. Sử dụng. không(. 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(. first-of-type)” để bỏ qua lần xuất hiện đầu tiên

Ví dụ

Trong ví dụ này, “. không(. 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 >
body a. không ( . loại đầu tiên ) {
màu sắc. màu xanh da trời;
}
kiểu>style>

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(. con đầu lòng)”, “. không(. loại thứ n(1))” hoặc “. không(. 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

CSS. bộ chọn con đầu tiên cho phép bạn nhắm mục tiêu một phần tử là phần tử con đầu tiên trong cha mẹ của nó

cú pháp

Cú pháp cho. bộ chọn CSS đang hoạt động là

element:first-child { style_properties }

Tham số hoặc Đối số

Ghi chú

• Các. bộ chọn con đầu tiên là một lớp giả cho phép bạn nhắm mục tiêu một phần tử là phần tử con đầu tiên trong phần tử cha của nó
• Xem thêm. con cuối cùng,. con thứ n,. nth-last_child và. bộ chọn con một
• Trong IE8,. kiểu con đầu lòng không được áp dụng cho đến khi liên kết mất tiêu điểm nếu phần tử được chèn động bằng cách nhấp vào liên kết

tính tương thích của trình duyệt web

CSS. bộ chọn con đầu tiên có hỗ trợ cơ bản với các trình duyệt sau

• Trình duyệt Chrome
• Android
• Firefox (Tắc kè)
• Firefox Di động (Tắc kè)
• Internet Explorer 7+ (IE 7+)
• IE Điện thoại 7+
• Opera 9. 5+
• Opera Mobile 10+
• Safari (WebKit)
• Safari di động

Ví dụ

Chúng tôi sẽ thảo luận về. bộ chọn con đầu tiên bên dưới, khám phá các ví dụ về cách sử dụng bộ chọn này trong CSS để áp dụng kiểu dáng cho phần tử đầu tiên

With tag

Let's look at a CSS :first-child example where we apply the :first-child selector to a tag.

CSS sẽ trông như thế này

span:first-child { font-weight: bold; color: red; }

HTML sẽ trông như thế này

  
Here are 2 sites: techonthenet.com and checkyourmath.com.

The result would look like this (The :first-child selector would style the tags as follows):

In this :first-child example, the text "techonthenet.com" that is within the first tag will display as red bolded text. The text "checkyourmath.com" within the second tag will not be styled by the :first-child selector.

With

tag

Let's look at a CSS :first-child example where we apply the :first-child selector to a

tag.

CSS sẽ trông như thế này

p:first-child { color: blue; }

HTML sẽ trông như thế này

  
This is the first paragraph written by techonthenet.com.
  
This is the second paragraph written by techonthenet.com.

The result would look like this (The :first-child selector would style the

tags as follows):

In this :first-child example, the color of the text within the first

tag will display as blue. The second

tag will not be styled by the :first-child selector.

With