Bộ chọn CSS và chi tiết

Bộ chọn CSS

Gần đây, tôi đã đi sâu vào các bộ chọn CSS.

Có rất nhiều bộ chọn CSS với các ký hiệu lạ,>. , * + ~ [] vv, vì vậy tôi thường bối rối về cách các bộ chọn CSS hoạt động. Cuối cùng, tôi nói thẳng ra trong đầu và thiết kế lại chúng theo cách tôi hiểu.

* Trên thực tế, tôi đã muốn tổ chức chúng trên một trang có kích thước A4 để lưu giấy tờ và cứu Trái đất nhưng tôi không thể, vì có rất nhiều công cụ chọn tôi muốn thêm nên tôi phải đi qua hơn một trang . Đó là tất cả bốn trang A4, ngoại trừ các trang bìa.

In chiếc áo này ra và dán lên tường. Don ghi nhớ chúng, chỉ nhìn trộm. Tôi hy vọng infographic này sẽ giúp bạn tìm thấy các bộ chọn CSS thích hợp một cách nhanh chóng và tiết kiệm thời gian của bạn.

Bộ chọn CSSTrò chơi chọn CSS của Ryan Yu

Đi để tải xuống bộ chọn CSS và thưởng thức trò chơi🕹

Đừng lo lắng. Nó tất cả đều miễn phí.

Đi sâu vào bộ chọn CSS.

Tôi sẽ liệt kê infographic cùng với các định nghĩa MDN để giúp mọi việc dễ dàng hơn với bạn.

Loại chọn

Bộ chọn loại CSS khớp với các phần tử theo tên nút. Nói cách khác, nó chọn tất cả các thành phần của loại đã cho trong một tài liệu. - MDN

Loại chọn

Bộ chọn ID

Chọn một phần tử dựa trên giá trị của thuộc tính id của nó. Chỉ nên có một yếu tố với một ID nhất định trong tài liệu. - MDN

Bộ chọn ID

Bộ chọn Hậu duệ

Bất kỳ yếu tố nào khớp với B là hậu duệ của một yếu tố phù hợp với A (nghĩa là một đứa trẻ hoặc một đứa trẻ của một đứa trẻ, v.v.). tổ hợp là một hoặc nhiều khoảng trắng hoặc lớn hơn dấu hiệu. - MDN

Bộ chọn Hậu duệ

Kết hợp Bộ chọn Hậu duệ & ID

Kết hợp Bộ chọn Hậu duệ & ID

Lớp chọn

Bộ chọn lớp CSS khớp với các phần tử dựa trên nội dung của thuộc tính lớp của chúng. - MDN

Lớp chọn

Kết hợp bộ chọn lớp

Kết hợp bộ chọn lớp

Kết hợp dấu phẩy

Bất kỳ yếu tố nào khớp với A và / hoặc B. - MDN

Kết hợp dấu phẩy

Bộ chọn phổ quát

Chỉ cần chọn tất cả mọi thứ!

Bộ chọn phổ quát

Kết hợp Bộ chọn phổ quát

Kết hợp Bộ chọn phổ quát

Liền kề chọn anh chị em

Bộ kết hợp anh chị em liền kề (+) tách hai bộ chọn và chỉ khớp với phần tử thứ hai nếu nó ngay sau phần tử thứ nhất và cả hai đều là con của cùng một phần tử cha. - MDN

Liền kề chọn anh chị em

Tổng tuyển chọn anh chị em

Bộ kết hợp anh chị em chung (~) tách hai bộ chọn và chỉ khớp với phần tử thứ hai nếu nó tuân theo phần tử thứ nhất (mặc dù không nhất thiết phải ngay lập tức) và cả hai đều là con của cùng một phần tử cha. - MDN

Tổng tuyển chọn anh chị em

Chọn trẻ em

Bộ kết hợp con (>) được đặt giữa hai bộ chọn CSS. Nó chỉ khớp với các phần tử được khớp bởi bộ chọn thứ hai là phần tử con của phần tử khớp với phần tử thứ nhất. - MDN

Chọn trẻ em

Bộ chọn giả đầu tiên

Lớp giả CSS CSS đầu tiên đại diện cho phần tử đầu tiên trong số một nhóm các phần tử anh chị em. - MDN

Bộ chọn giả đầu tiên

Chỉ có bộ chọn giả

Lớp giả CSS CSS chỉ có một con đại diện cho một phần tử mà không có anh chị em nào. Điều này giống như: con đầu lòng: con cuối hoặc: nth-con (1): nth-last-child (1), nhưng với độ đặc hiệu thấp hơn. - MDN

Chỉ có bộ chọn giả

Bộ chọn giả cuối cùng

Lớp giả CSS CSS con cuối cùng đại diện cho phần tử cuối cùng trong số một nhóm các phần tử anh chị em. - MDN

Bộ chọn giả cuối cùng

Bộ chọn giả thứ N

Lớp giả CSS: nth-child () khớp với các phần tử dựa trên vị trí của chúng trong một nhóm anh chị em. - MDN

Bộ chọn giả thứ N

Bộ chọn con cuối cùng thứ N

Lớp giả CSS: nth-last-child () khớp với các thành phần dựa trên vị trí của chúng trong một nhóm anh chị em, tính từ cuối. - MDN

Bộ chọn con cuối cùng thứ N

Bộ chọn đầu tiên

Lớp giả CSS CSS loại đầu tiên đại diện cho phần tử đầu tiên của loại trong số một nhóm các phần tử anh chị em. - MDN

Bộ chọn đầu tiên

Bộ chọn thứ N

Lớp giả CSS: nth-of-type () phù hợp với các yếu tố của một loại nhất định, dựa trên vị trí của chúng trong một nhóm anh chị em. - MDN

Bộ chọn thứ N

Công cụ chọn loại thứ N với công thức

Bộ chọn loại thứ n
Lưu ý:
: loại thứ n (chẵn)
: loại thứ n (lẻ)
: loại thứ n (2)
: loại thứ n (2n)
: loại thứ n (3n-1)
: loại thứ n (2n + 2)

Chỉ có kiểu chọn

Lớp giả CSS CSS chỉ có một loại đại diện cho một phần tử không có anh chị em cùng loại. - MDN

Chỉ có kiểu chọn

Bộ chọn cuối cùng

Lớp giả CSS CSS loại cuối cùng đại diện cho phần tử cuối cùng của loại này trong một nhóm các phần tử anh chị em. - MDN

Bộ chọn cuối cùng

Bộ chọn trống

Lớp giả CSS rỗng: đại diện cho bất kỳ phần tử nào không có con. Trẻ em có thể là nút yếu tố hoặc văn bản (bao gồm cả khoảng trắng). Nhận xét, hướng dẫn xử lý và nội dung CSS không ảnh hưởng đến việc một phần tử có được coi là trống không. - MDN

Bộ chọn trống

Lớp phủ định giả

Lớp giả CSS: not () CSS đại diện cho các thành phần không khớp với danh sách các bộ chọn. Vì nó ngăn các mục cụ thể được chọn, nên nó được gọi là lớp giả phủ định. - MDN

Lớp phủ định giả

Bộ chọn thuộc tính

Bộ chọn thuộc tính là một loại bộ chọn đặc biệt sẽ khớp với các phần tử dựa trên các thuộc tính và giá trị thuộc tính của chúng. Cú pháp chung của chúng bao gồm dấu ngoặc vuông ([]) chứa tên thuộc tính theo sau là một điều kiện tùy chọn để khớp với giá trị của thuộc tính. Bộ chọn thuộc tính có thể được chia thành hai loại tùy thuộc vào cách chúng khớp với các giá trị thuộc tính: Bộ chọn thuộc tính giá trị và thuộc tính giá trị và bộ chọn thuộc tính giá trị chuỗi con. - MDN

Bộ chọn thuộc tính

Bộ chọn giá trị thuộc tính

Bộ chọn giá trị thuộc tính

Thuộc tính bắt đầu với bộ chọn

Bộ chọn này sẽ chọn tất cả các phần tử với thuộc tính attr mà giá trị bắt đầu bằng val. - MDN

Thuộc tính bắt đầu với bộ chọn

Kết thúc thuộc tính với bộ chọn

Bộ chọn này sẽ chọn tất cả các phần tử với thuộc tính attr mà giá trị kết thúc bằng val. - MDN

Kết thúc thuộc tính với bộ chọn

Thuộc tính Wildcard Selector

Bộ chọn này sẽ chọn tất cả các phần tử với thuộc tính attr mà giá trị chứa giá trị chuỗi con. (Một chuỗi con chỉ đơn giản là một phần của chuỗi, ví dụ: "cat" là một chuỗi con trong chuỗi "sâu bướm".) - MDN

Thuộc tính Wildcard Selector

Xin chúc mừng, bạn đã hoàn thành

Bài viết

🕹 CodePen

Mọi thắc mắc hoặc phản hồi

Tôi rất thích nghe phản hồi của bạn về cách tôi có thể làm cho nó tốt hơn cho bạn. Vui lòng để lại ý kiến ​​của bạn dưới đây hoặc thông qua Twitter của tôi.

Rất cảm ơn Ryan Yu vì đã giúp tôi tạo trò chơi chọn CSS. Ryan Yu là tác giả của nơi tôi đã học được nhiều kỹ thuật front-end thú vị.

Chúc mừng ngày hôm nay