CSS con đầu lòng không có lớp

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

tr:first-child { background: yellow; }

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

    Column 1 Heading
    Column 2 Heading
  

  

  

    
techonthenet.com
    
Technical reference site
  
  

    
checkyourmath.com
    
Math calculation site
  
  

    
bigactivities.com
    
Kids activity site
  

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

Trong CSS này. ví dụ con đầu lòng, hàng đầu tiên [tức là. thẻ đầu tiên] sẽ có màu nền vàng. Tất cả các hàng khác trong bảng sẽ không được tạo kiểu bởi. bộ chọn con đầu tiên

Sự khác biệt giữa. con đầu lòng và. bộ chọn loại đầu tiên trong CSS

Cải thiện bài viết

Lưu bài viết

Thích bài viết

• Cập nhật lần cuối. 16 tháng 6 năm 2022

Cải thiện bài viết

Lưu bài viết

Cả hai đều là bộ chọn cho HTML được sử dụng trong CSS để chọn phần tử con cụ thể.
Các. con đầu lòng. Các. bộ chọn con đầu tiên được sử dụng để chọn các phần tử là phần tử con đầu tiên. Vì. bộ chọn con đầu tiên
Các. hạng nhất. Các. bộ chọn loại đầu tiên được sử dụng để nhắm mục tiêu phần tử con đầu tiên của mọi phần tử trong phần tử cha của nó. nếu chúng ta muốn tạo kiểu cho phần tử con đầu tiên mà không cần tạo lớp, chúng ta có thể sử dụng nó.
Ví dụ.
 

html