Bảng chọn bộ chọn CSS – Danh sách đầy đủ các bộ chọn

Bảng chọn gian lận CSS cung cấp cho chúng tôi tổng quan nhanh về những gì chúng tôi sẽ tìm hiểu trong bộ chọn CSS

Nhà thiết kế thường nhầm lẫn với các bộ chọn thuộc tính, bộ chọn phần tử, phần tử giả, lớp giả, bộ kết hợp. Nhưng tất cả họ đều là người chọn. Và tờ cheat này đã được trình bày theo cách mà nó kết thúc một cách khó hiểu giữa các loại bộ chọn khác nhau.

Bảng cheat của Selector đại diện cho tất cả các bộ chọn với các ví dụ để bạn có thể học nó dễ dàng và nhanh chóng.

Xem danh sách đầy đủ các bộ chọn CSS.

---

Một lời giải thích chi tiết về Bộ chọn CSS

Các phần tử được chọn theo tên phần tử hoặc bộ chọn phổ quát.

Bộ chọn loại

Bộ chọn thành phần chọn các thành phần theo tên thành phần hoặc danh sách tên thành phần và sau đó áp dụng các thuộc tính CSS cho các thành phần được chọn.

  p, span, mã {màu: đỏ; } 
    

Bộ chọn phổ quát (*)

'*' là một bộ chọn phổ quát. Nó chọn tất cả các thành phần và áp dụng các thuộc tính CSS.

  * {màu: đỏ; } 
    

---

Bộ chọn thuộc tính chọn những phần tử có thuộc tính và giá trị theo quy tắc của bộ chọn thuộc tính.

[att]

[att] chọn những yếu tố có thuộc tính 'att' .

  đầu vào [type] 
    

[att=val]

[att=val] chọn những yếu tố có thuộc tính 'att' với giá trị 'val'

  div  
    

[att~=val]

'~' bộ chọn sẽ chọn các phần tử có thuộc tính 'att' với ít nhất một giá trị khớp với giá trị 'val'

  a [rel~="next"] 
    

[att|=val]

'|' bộ chọn sẽ chọn các phần tử có thuộc tính 'att' với giá trị 'val' theo dấu gạch nối (-).

  a [hreflang|="en-US"] 
    

[att^=val]

'^' bộ chọn sẽ chọn các phần tử có thuộc tính 'att' và giá trị bắt đầu bằng 'val' .

  img [type^="image/"] 
    

[att$=val]

'$' bộ chọn sẽ chọn những phần tử có thuộc tính 'att' và giá trị kết thúc bằng 'val'

  img [type$="png"] 
    

[att*=val]

'*' bộ chọn sẽ chọn các phần tử có thuộc tính 'att' với giá trị 'val' làm chuỗi con.

  p [class*="sign"] 
    

---

Một phần tử giả bao gồm màu kép (: 🙂 theo tên của phần tử giả. Và phần tử giả áp dụng các thuộc tính CSS cho phần tử được liên kết.

Nó truy cập nội dung không có trong hệ thống phân cấp. Và ngôn ngữ tài liệu không thể truy cập được trong cây tài liệu.

:: Firs-line

:: dòng đầu tiên chọn dòng linh kiện của phần tử liên quan và áp dụng các thuộc tính CSS.

  p :: dòng đầu tiên {font-size: 20px;} 
    

:: chữ cái đầu tiên

:: chữ cái đầu tiên chọn chữ cái đầu tiên của thành phần được liên kết và áp dụng các thuộc tính CSS.

  p :: chữ cái đầu tiên {text-Transform: chữ hoa;} 
    

:: select

:: select đại diện cho văn bản được người dùng chọn trong thành phần được liên kết.

  div :: select {màu nền: màu xanh lá cây;} 
    

:: sau

:: sau khi chọn nội dung được tạo từ CSS và nội dung được tạo nằm sau phần tử được liên kết.

  div :: sau {nội dung: "... tìm hiểu thêm";} 
    

:: trước

:: trước khi chọn nội dung được tạo từ CSS và nội dung được tạo trước phần tử liên quan.

  div :: trước {nội dung: "Mẹo:";} 
    

:: giữ chỗ

:: phần tử giả giữ chỗ chọn các phần tử đầu vào có thuộc tính giữ chỗ.

  input :: giữ chỗ {color: blue;} 
    

---

Nó chọn các yếu tố dựa trên mối quan hệ giữa các yếu tố trong hệ thống phân cấp của các yếu tố i.e dựa trên việc nó là con, tiếp theo hay yếu tố giảm dần.

Người kết hợp hậu duệ

tổ hợp hậu duệ chọn và áp dụng các thuộc tính CSS cho phần tử con quỹ đạo.

  div p {màu nền: xanh lá cây;} 
    

Người phối hợp trẻ em ('>')

bộ kết hợp con chọn và áp dụng các thuộc tính CSS cho phần tử con.

  ol> li {màu nền: lightblue;} 
    

Người kết hợp anh chị em tiếp theo ('+')

'+' tổ hợp chọn và áp dụng các thuộc tính CSS cho phần tử ngay lập tức tiếp theo của phần tử hiện tại.

  p + mã {màu: đỏ;} 
    

Theo sau tổ hợp ('~')

'~' tổ hợp chọn và áp dụng các thuộc tính CSS cho phần tử tiếp theo của phần tử hiện tại.

  mã ~ kbd {color: rgb (0,225,0);} 
    

---

5. Các lớp giả

Lớp giả bao gồm dấu hai chấm đơn (':') và tên lớp giả.

5.1 Lớp giả hành động của người dùng

Lớp giả này được sử dụng khi người dùng tương tác với một liên kết bằng mọi cách.

: liên kết

: liên kết chọn và áp dụng các thuộc tính CSS cho tất cả các siêu liên kết.

  a {màu: đen;} 
    

: di chuột

: di chuột áp dụng các thuộc tính CSS cho siêu liên kết khi người dùng di chuột qua liên kết.

  a: hover {màu: xanh;} 
    

: đã truy cập

: đã truy cập áp dụng các thuộc tính CSS cho siêu liên kết đã được truy cập.

  a: đã truy cập {màu: đỏ;} 
    

: hoạt động

: lớp giả hoạt động áp dụng các thuộc tính CSS cho siêu liên kết trong thời lượng hoạt động (thời lượng giữa nhấp chuột và phát hành chuột).

  a: hoạt động {màu: xanh;} 
    

5.2 Các lớp giả đầu vào

Lớp giả đầu vào chọn phần tử đầu vào dựa trên thuộc tính bool hoặc của phần tử đầu vào.

: bị vô hiệu hóa

: lớp giả bị vô hiệu hóa chọn phần tử đầu vào bị vô hiệu hóa bởi thuộc tính bị vô hiệu hóa.

  đầu vào: bị vô hiệu hóa {màu nền: màu xám; } 
    

: đã bật

: được bật sẽ chọn các yếu tố đầu vào được bật và các yếu tố đầu vào được bật theo mặc định.

  đầu vào: enable {Border-radius: 2px; } 
    

: đã kiểm tra

: đã chọn sẽ chọn các yếu tố đầu vào đã được người dùng kiểm tra hoặc kiểm tra.

  đầu vào: đã kiểm tra {height: 20px; } 
    

: chỉ đọc

: lớp giả chỉ đọc chọn các phần tử đầu vào có thuộc tính chỉ đọc.

  đầu vào: chỉ đọc {màu nền: xám; } 
    

: giữ chỗ hiển thị

: lớp giả được hiển thị giữ chỗ chọn các thành phần có thuộc tính giữ chỗ

  đầu vào: giữ chỗ hiển thị {font-size: 20px; } 
    

: ngoài phạm vi

: lớp giả ngoài phạm vi chọn phần tử đầu vào trong đó giá trị nằm ngoài phạm vi.

  đầu vào: ngoài phạm vi {màu: đỏ; } 
    

: bắt buộc

: lớp giả yêu cầu chọn phần tử đầu vào yêu cầu thông tin nhất thiết.

  đầu vào: bắt buộc {box-Shadow: 3px 3px 5x rgba (200,200,200,0,5); } 
    

5.3 Các lớp giả cấu trúc

Lớp giả này chọn các phần tử con theo vị trí của phần tử con đối với cha mẹ và vị trí được đánh giá theo biểu thức.

: con đầu lòng

: con đầu tiên chọn con đầu tiên của phần tử cha.

  bảng tr: con đầu lòng {màu nền: xám; } 
    

: con thứ n (E)

: nth-child (E) chọn phần tử con theo giá trị của biểu thức (E) để đánh giá vị trí của phần tử từ đầu.

  bảng tr: nth-child (2n + 1) {màu nền: xám; } 
    

: con cuối cùng

: con cuối cùng chọn con cuối cùng của phần tử cha.

  ul li: đứa con cuối cùng {màu nền: lightblue; } 
    

: con thứ n (E)

: nth-last-child (E) chọn phần tử con theo giá trị của biểu thức (E) để đánh giá vị trí của phần tử từ cuối.

  bảng tr: nth-last-child (2n + 1) {màu nền: xám; } 
    

: con duy nhất

: con duy nhất chọn phần tử là con duy nhất của phần tử cha.

  div p: only-child {màu nền: lightblue; } 
    

: loại đầu tiên

: loại đầu tiên chọn con đầu tiên của một loại phần tử cụ thể. Trong trường hợp này, cha mẹ có nhiều hơn một loại yếu tố.

  dl dd: loại đầu tiên {màu nền: lightblue; } 
    

: loại thứ n (E)

: nth-of-type (E) chọn phần tử con của một loại phần tử cụ thể theo giá trị của biểu thức (E) để đánh giá vị trí của phần tử từ đầu. Trong trường hợp này, cha mẹ có nhiều hơn một loại phần tử.

  tr td: nth-of-type (2n + 1) {màu nền: xám; } 
    

: loại cuối cùng

: loại cuối cùng chọn phần cuối cùng của một loại phần tử cụ thể.

  dl dd: last-of-type {màu nền: lightblue; } 
    

: nth-last-of-type (n)

: nth-last-of-type (E) chọn phần tử con của một loại phần tử cụ thể theo giá trị của biểu thức (E) để đánh giá vị trí của phần tử từ cuối. Trong trường hợp này, cha mẹ có nhiều hơn một loại yếu tố.

  cơ thể> h2: nth-last-of-type (n + 6) {color: blue; } 
    

---

Tóm tắt

Bảng cheat này bao gồm tất cả các chủ đề và chủ đề phụ của bộ chọn. Trong trang này, bạn thấy một định nghĩa và một ví dụ liên quan đến mọi chủ đề phụ. Nhưng bạn có thể tìm hiểu nó kỹ lưỡng trong các hướng dẫn CSS.

---