CSS first of type là một lớp giả giúp bạn chọn phần tử đầu tiên của kiểu trong số nhiều phần tử anh em. Nhấn vào đây để tìm hiểu cách sử dụng nó.

Bạn đang xem : css đầu tiên của loại

Css đầu tiên của loại pseudo class CSS đầu tiên của loại pseudo-class giúp bạn nhắm mục tiêu các yếu tố cụ thể trong thiết kế web . Nói cách khác, nó là một bộ chọn trong CSS cho phép bạn nhắm mục tiêu phần tử duy nhất đầu tiên trong một khối. Bạn có thể sử dụng nó để tạo kiểu cho nội dung tùy thuộc vào cách nó liên quan đến nội dung gốc và nội dung anh chị em khác. Đọc tiếp để tìm hiểu cách bạn có thể sử dụng nó để có lợi cho mình.

Cách sử dụng CSS First of Type

< / h2>

Đôi khi khi bạn tạo một trang web, bạn có thể quyết định nhắm mục tiêu các phần tử cụ thể có kiểu dáng tương tự trong CSS. Giả sử thiết kế trang web của bạn sử dụng nhiều & lt; span & gt; thẻ và & lt; div & gt; nhưng ý định của bạn là nhắm mục tiêu đầu tiên của mỗi loại để áp dụng một kiểu phù hợp. Bạn có thể thực hiện điều này thông qua lớp giả loại đầu tiên.

Cú pháp cho lớp giả này như sau:

: loại đầu tiên

{

Quy tắc CSS hợp lệ

}

CSS selector loại đầu tiên hoạt động với các bộ chọn phần tử như div, li, p, span, a và nhiều công cụ khác. Ngoài ra, bạn có thể kết hợp lớp giả này với bộ chọn lớp miễn là phần tử bạn muốn định kiểu cũng là loại đầu tiên sử dụng bộ chọn phần tử.

– Ví dụ – Cách sử dụng: first-of-type Pseudo-class

Giả sử bạn đang tạo trang đích cho quán cà phê địa phương của mình. Chủ sở hữu muốn tiêu đề của từng danh mục menu trong trang web của họ dùng chung phông chữ và màu nền cũng như bất kỳ kiểu nào khác được áp dụng cho chúng. Để thực hiện điều này, bạn có thể thêm nhiều thẻ HTML vào trang như sau:

& lt; body & gt;

& lt; h2 class = ”first & gt; Local Cafe Menu & lt; / h2 & gt;

& lt; div & gt;

Cà phê

& lt; / div & gt;

& lt; br & gt;

& lt; div & gt;

Americano 200ml = $ 2,00 & lt; br & gt;

Cappuccino 200ml = $ 2,00 & lt; br & gt;

Expresso 100ml = $ 2,00 & lt; br & gt;

Mocha 200ml = $ 2,00 & lt; br & gt;

& lt; / div & gt;

& lt; br & gt;

& lt; bài báo & gt;

Đồ uống Nóng & lt; / article & gt; & lt; br & gt;

& lt; bài báo & gt;

Sô cô la nóng 200ml = $ 1,50 & lt; br & gt;

Sô cô la trắng 200ml = $ 2,00 & lt; br & gt;

Trà xanh 200ml = $ 2,00 & lt; br & gt;

Trà vani 100ml = 1,49 đô la & lt; br & gt;

& lt; / article & gt;

& lt; p & gt;

Món tráng miệng

& lt; / p & gt;

& lt; p & gt;

Kẹo 100g = 0,5 đô la & lt; br & gt;

Bánh cupcake 100g = 1 đô la & lt; br & gt;

Bánh donut 100g = $ 0,49 & lt; br & gt;

Bánh sừng bò 100g = $ 2,00 & lt; br & gt;

Bánh pho mát 100g = $ 1,50 & lt; br & gt;

& lt; / p & gt;

& lt; dl & gt;

Bánh mì sandwich

& lt; / dl & gt;

& lt; dl & gt;

Egg Mayo = $ 4,00 & lt; br & gt;

Salad pho mát = $ 4,00 & lt; br & gt;

Brie Cheese = $ 4,00 & lt; br & gt;

Salad cá ngừ = $ 4,00 & lt; br & gt;

& lt; / dl & gt;

& lt; dt & gt;

Tiệm bánh

& lt; / dt & gt;

& lt; br & gt;

& lt; dt & gt;

Cinnamon Roll = $ 3,00 & lt; br & gt;

Bánh quy yến mạch = $ 3,00 & lt; br & gt;

Tiếng Anh Scone = $ 3,00 & lt; br & gt;

Doanh thu của Apple = $ 3,00 & lt; br & gt;

& lt; / dt & gt;

& lt; h2 & gt;

Chào mừng bạn

& lt; / h2 & gt;

& lt; / body & gt;

Tiếp theo, với CSS, bạn có thể tạo tiêu đề cho mỗi danh mục để chia sẻ cùng một kiểu. Giả sử bạn muốn tạo tiêu đề có nền màu cam, văn bản có màu xanh lam cũng như trang trí văn bản của nó. Đây là cách bạn có thể thực hiện điều này bằng cách sử dụng phần tử CSS đầu tiên của loại :

body: first-of-type
{
background-color: Orange;
text-decoration: gạch dưới gạch chân 4px;
màu: xanh lam;
}

Trong ví dụ này, bạn sẽ nhận thấy việc sử dụng mỗi thẻ HTML ít nhất hai lần. Mã CSS ở trên cho phép bạn chọn phần tử đầu tiên của loại mã này và áp dụng kiểu cho phù hợp. Do đó, nó chỉ tạo kiểu cho thẻ đầu tiên cùng loại trong phần nội dung.

Cách sử dụng: First-of-type Cùng với Bộ chọn Lớp

Bạn có biết rằng bạn có thể sử dụng bộ chọn lớp khi phần tử bạn đang chọn là loại đầu tiên không? Chà, bạn có thể sử dụng CSS first of type class để tạo kiểu cho một phần tử miễn là nó là kiểu đầu tiên của bộ chọn phần tử.

Tuy nhiên, nếu bạn có các phần tử khác có cùng tên lớp mà không phải là loại đầu tiên của bộ chọn phần tử, thì kiểu sẽ không áp dụng cho chúng . Lý do là, trong hầu hết các trường hợp, phần tử đầu tiên có tên lớp đã đặt thường không phải là phần tử đầu tiên. Điều đó có nghĩa là nếu bạn có các phần tử hoặc thẻ khác có cùng tên lớp, thì kiểu sẽ vẫn được áp dụng.

Cú pháp để sử dụng bộ chọn lớp và lớp giả kiểu thứ nhất là:

.class: loại đầu tiên

{

Quy tắc CSS hợp lệ

}

– Ví dụ – Sử dụng Bộ chọn lớp và: Pseudo-class loại đầu tiên < p class = "ez-toc-section-end">

Giả sử bây giờ thay vì sử dụng Phần tử CSS đầu tiên của loại , bạn quyết định sử dụng bộ chọn lớp cho ví dụ quán cà phê địa phương. Bây giờ, bạn cần đặt tên lớp cho mỗi phần tử. Đây là cách bạn thực hiện trong HTML:

& lt; body & gt;

& lt; h2 class = “first” & gt; Menu Quán cà phê Địa phương & lt; / h2 & gt;

& lt; div class = “first” & gt;

Cà phê

& lt; / div & gt;

& lt; br & gt;

& lt; div class = “first” & gt;

Americano 200ml = $ 2,00 & lt; br & gt;

Cappuccino 200ml = $ 2,00 & lt; br & gt;

Expresso 100ml = $ 2,00 & lt; br & gt;

Mocha 200ml = $ 2,00 & lt; br & gt;

& lt; / div & gt;

& lt; br & gt;

& lt; article class = “first” & gt;

Đồ uống Nóng & lt; / article & gt; & lt; br & gt;

& lt; article class = “first” & gt;

Sô cô la nóng 200ml = $ 1,50 & lt; br & gt;

Sô cô la trắng 200ml = $ 2,00 & lt; br & gt;

Trà xanh 200ml = $ 2,00 & lt; br & gt;

Trà vani 100ml = 1,49 đô la & lt; br & gt;

& lt; / article & gt;

& lt; p class = “first” & gt;

Món tráng miệng

& lt; / p & gt;

& lt; p class = “first” & gt;

Kẹo 100g = 0,5 đô la & lt; br & gt;

Bánh cupcake 100g = 1 đô la & lt; br & gt;

Bánh donut 100g = $ 0,49 & lt; br & gt;

Bánh sừng bò 100g = $ 2,00 & lt; br & gt;

Bánh pho mát 100g = $ 1,50 & lt; br & gt;

& lt; / p & gt;

& lt; dl class = “first” & gt;

Bánh mì sandwich

& lt; / dl & gt;

& lt; dl class = “first” & gt;

Egg Mayo = $ 4,00 & lt; br & gt;

Salad pho mát = $ 4,00 & lt; br & gt;

Brie Cheese = $ 4,00 & lt; br & gt;

Salad cá ngừ = $ 4,00 & lt; br & gt;

& lt; / dl & gt;

& lt; dt class = “first” & gt;

Tiệm bánh

& lt; / dt & gt;

& lt; br & gt;

& lt; dt class = “first” & gt;

Cinnamon Roll = $ 3,00 & lt; br & gt;

Bánh quy yến mạch = $ 3,00 & lt; br & gt;

Tiếng Anh Scone = $ 3,00 & lt; br & gt;

Doanh thu của Apple = $ 3,00 & lt; br & gt;

& lt; / dt & gt;

& lt; h2 class = “first” & gt;

Chào mừng bạn

& lt; / h2 & gt;

& lt; / body & gt;

Bạn sẽ nhận thấy rằng tên lớp đã được sử dụng ngay cả trong các phần tử không nhất thiết phải là tên đầu tiên của kiểu. Điều này cho thấy rằng ngay cả với bộ chọn lớp, kiểu đầu tiên của loại giả chỉ áp dụng cho các phần tử thích hợp .

Giờ đây, bằng cách sử dụng bộ chọn lớp, bạn có thể áp dụng kiểu cho bất kỳ phần tử đầu tiên nào với tên lớp “đầu tiên”. Dưới đây là các bước để biết cách thực hiện điều này trong CSS:

.first: loại đầu tiên
{
background-color: Orange;
text-decoration: gạch dưới gạch chân 4px;
Màu sắc: xanh lam;
}

Có sự khác biệt giữa nội dung trước: ví dụ đầu tiên của loại và ví dụ .first: đầu tiên của loại. Nội dung: quy tắc đầu tiên của loại áp dụng cho phần tử đầu tiên thuộc loại trong khối nội dung, trong khi quy tắc .first: first-of-type áp dụng cho phần tử đầu tiên có lớp “first”.

Cách sử dụng: First-of-type Với CSS Con đầu tiên của Loại

Với CSS, bạn cũng có thể sử dụng kiểu đầu tiên trên phần tử con đầu tiên của phần tử mẹ. Để làm điều này, bạn cần chọn cha mẹ và con đầu tiên mà bạn muốn áp dụng phong cách bạn muốn. Đây là cách bạn tạo kiểu con đầu tiên của loại trong CSS .

– Ví dụ – Trang trí Con đầu tiên của Kiểu trong CSS

Giả sử bây giờ bạn quyết định sử dụng & lt; div & gt; và & lt; span & gt; chỉ để tạo kiểu cho tiêu đề của mỗi danh mục cho ví dụ về quán cà phê địa phương. Trước tiên, bạn cần tạo HTML cho trang đích cho quán cà phê như sau:

& lt; body & gt;

& lt; h2 & gt; Menu Quán cà phê Địa phương & lt; / h2 & gt;

& lt; div & gt; & lt; span & gt;

Cà phê

& lt; / span & gt;

& lt; br & gt;

& lt; span & gt;

& lt; br & gt;

Americano 200ml = $ 2,00 & lt; br & gt;

Cappuccino 200ml = $ 2,00 & lt; br & gt;

Expresso 100ml = $ 2,00 & lt; br & gt;

Mocha 200ml = $ 2,00 & lt; br & gt;

& lt; / span & gt;

& lt; br & gt;

& lt; div & gt; & lt; span & gt;

Đồ uống Nóng & lt; / span & gt; & lt; br & gt;

& lt; span & gt;

& lt; br & gt;

Sô cô la nóng 200ml = $ 1,50 & lt; br & gt;

Sô cô la trắng 200ml = $ 2,00 & lt; br & gt;

Trà xanh 200ml = $ 2,00 & lt; br & gt;

Trà vani 100ml = 1,49 đô la & lt; br & gt;

& lt; / span & gt;

& lt; / div & gt;

& lt; br & gt;

& lt; div & gt; & lt; span & gt;

Món tráng miệng

& lt; / span & gt; & lt; br & gt;

& lt; span & gt;

& lt; br & gt;

Kẹo 100g = 0,5 đô la & lt; br & gt;

Bánh cupcake 100g = 1 đô la & lt; br & gt;

Bánh donut 100g = $ 0,49 & lt; br & gt;

Bánh sừng bò 100g = $ 2,00 & lt; br & gt;

Bánh pho mát 100g = $ 1,50 & lt; br & gt;

& lt; / span & gt; & lt; br & gt;

& lt; / div & gt;

& lt; div & gt; & lt; span & gt;

Bánh mì sandwich

& lt; / span & gt; & lt; br & gt;

& lt; span & gt; & lt; br & gt;

Egg Mayo = $ 4,00 & lt; br & gt;

Salad pho mát = $ 4,00 & lt; br & gt;

Brie Cheese = $ 4,00 & lt; br & gt;

Salad cá ngừ = $ 4,00 & lt; br & gt;

& lt; / span & gt; & lt; br & gt;

& lt; / div & gt;

& lt; div & gt; & lt; span & gt;

Tiệm bánh

& lt; / span & gt; & lt; br & gt;

& lt; br & gt;

& lt; span & gt;

Cinnamon Roll = $ 3,00 & lt; br & gt;

Bánh quy yến mạch = $ 3,00 & lt; br & gt;

Tiếng Anh Scone = $ 3,00 & lt; br & gt;

Doanh thu của Apple = $ 3,00 & lt; br & gt;

& lt; / span & gt;

& lt; / div & gt;

& lt; h2 & gt;

Chào mừng bạn

& lt; / h2 & gt;

& lt; / body & gt;

Thứ hai, sử dụng lớp giả CSS loại thứ nhất , bạn có thể tạo kiểu cho các tiêu đề danh mục khác nhau. Bạn có thể làm cho chúng có cùng màu nền và màu văn bản cũng như text-decoration giống như vậy trong CSS:

div span: loại đầu tiên
{
background-color: Orange;
text-decoration: gạch dưới gạch chân 4px;
Màu sắc: xanh lam;
}

Khả năng tương thích của trình duyệt

Loại giả loại đầu tiên tương thích với các trình duyệt trên máy tính để bàn và thiết bị di động sau:

  • Chrome 1.0
  • Cạnh 12.0
  • Firefox 3.5
  • Internet Explorer 9.0
  • Opera 9.5
  • Safari 3.1
  • Samsung Internet 1.0
  • Safari trên iOS 2.0
  • WebView Android 2.0
  • Firefox dành cho Android 4.0
  • Opera Android 10.1
  • Chrome Android 18.0

Kết luận

CSS cung cấp cách tạo kiểu cho các phần tử đầu tiên của một loại cụ thể trong một khối nhất định. Trong hướng dẫn này, bạn đã biết cách thực hiện việc này trong CSS. Đây là một bản tóm tắt nhanh:

  • Loại thứ nhất là loại giả trong CSS
  • Nó cho phép bạn chọn phần tử đầu tiên của một loại nhất định, thậm chí có thể tích hợp lớp giả với các bộ chọn khác
  • Nó hoạt động với các bộ chọn phần tử như span, div, li, a và nhiều công cụ khác
  • Ví dụ: bạn có thể sử dụng bộ chọn lớp để chỉ tạo kiểu cho phần tử đầu tiên với tên lớp đã đặt
  • Tuy nhiên, kiểu sẽ không áp dụng cho các phần tử khác có cùng tên lớp nếu chúng không phải là phần tử đầu tiên bởi bộ chọn phần tử

Sử dụng phần tử css đầu tiên của loại Với kiến ​​thức này, bây giờ bạn có thể bắt đầu tạo kiểu phần tử con đầu tiên của mọi thành phần chính như một chuyên gia.

5/5 – (15 phiếu bầu)


Xem thêm những thông tin liên quan đến chủ đề css đầu tiên của loại

CSS Selector Và Thứ Tự Ưu Tiên

alt

  • Tác giả: Kim Minh
  • Ngày đăng: 2020-07-21
  • Đánh giá: 4 ⭐ ( 9763 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: CSS Selector Và Thứ Tự Ưu Tiên
    selector specificity css html

    Chỉ định đúng phần tử để thao tác CSS được xem là việc cực kỳ quan trọng. Bên cạnh đó, sắp xếp thứ tự ưu tiên cũng được đặt lên hàng đầu. Hiểu rõ hai yếu tố này giúp lập trình viên thiết kế nhanh và dễ dàng hơn cũng như phát hiện và sửa lỗi trong CSS. Anh em theo dõi nhé, cảm ơn mọi người.

    Code Editor: VS Code
    Source Code:

    https://github.com/kimminhtuts/html-css-lessons/tree/master/selector-specificity

    Music: https://www.bensound.com
    ———————-

    Facebook: https://www.facebook.com/kimminhtuts

    ———————-

    Playlist URLs:

    1. How To:

    https://www.youtube.com/playlist?list=PLEqDXVCpfmwsZzi8WWoX5uJc9eyJtsRh1

    2. Loading Effect:
    https://www.youtube.com/playlist?list=PLEqDXVCpfmwtkYGzTywhTlPMMeI451cSx

    3. Button Effect:
    https://www.youtube.com/playlist?list=PLEqDXVCpfmwubNPvLJBBgeL8Oni7Oma1-

    4. Image Slideshow:
    https://www.youtube.com/playlist?list=PLEqDXVCpfmwsPWCa9qTwADJ_p0qU8F-_Z

    5. Card Effect:
    https://www.youtube.com/playlist?list=PLEqDXVCpfmwuNBQ5Va0z3kJrP30OPAjw-

    6. Text Effect:
    https://www.youtube.com/playlist?list=PLEqDXVCpfmwuRGwZpWcr08HZ7UxPH9Vtq

CSS Selectors

  • Tác giả: viblo.asia
  • Đánh giá: 5 ⭐ ( 4514 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này, chúng ta sẽ tìm hiểu về một khái niệm không hề mới nhưng không phải ai cũng có thể nắm rõ và sử dụng linh hoạt, CSS Selector.

Tất tần tật về độ ưu tiên trong CSS

  • Tác giả: evondev.com
  • Đánh giá: 5 ⭐ ( 8455 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Độ ưu tiên trong CSS rất là quan trọng. Nó giúp chúng ta code hợp lý để có thể style ra cho đúng kết quả mong muốn. Hôm nay chúng ta sẽ cùng tìm hiểu…

CSS là gì? cách hoạt động và cách học CSS

  • Tác giả: websitehcm.com
  • Đánh giá: 4 ⭐ ( 8593 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: CSS là gì? cách hoạt động và cách học CSS w3seo tìm hiểu về các khái niệm cơ bản trong CSS, nguyên lý sử dụng CSS trong html

CSS là gì? Các ví dụ cụ thể về CSS

  • Tác giả: vietnix.vn
  • Đánh giá: 3 ⭐ ( 6192 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cùng tìm hiểu khái niệm, cấu trúc, các thành phần CSS là gì? Để việc học tập và làm việc với CSS được chính xác, dễ hiểu và hiệu quả nhất.

CSS là gì? CSS quan trọng như thế nào trong website?

  • Tác giả: bizcloud.vn
  • Đánh giá: 3 ⭐ ( 3940 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Mặc dù website đã trở nên khá phổ biến, thế nhưng không phải ai cũng có thể hiểu rõ về cấu trúc của trang web, hay là về CSS. Vậy CSS là gì? Bố cục và cấu

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

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 2746 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Đâ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…

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Cách kết nối Cơ sở dữ liệu MySQL với Trang web PHP - kết nối với cơ sở dữ liệu php

By ads_php