Tham chiếu bộ chọn CSS
Tham chiếu các bộ chọn CSS. Điều này bao gồm các bộ chọn mới từ Bộ chọn CSS Cấp 3 (CSS3):
Bộ chọn phổ quát: *
Chọn mọi thứ.
Bộ chọn phần tử gốc:: root
Chọn phần tử root . Tất cả các phần tử đều là con của phần tử root và nó luôn tham chiếu đến phần tử <html> .
Bộ chọn loại: h2
Chọn tất cả các phần tử của loại.
Bộ chọn ID: #myEl
Chọn phần tử có ID được cung cấp.
Bộ chọn lớp: .btn-xl
Chọn tất cả các phần tử với lớp được cung cấp.
Bộ chọn thuộc tính
Bộ chọn thuộc tính đơn giản: [target]
Chọn các phần tử có thuộc tính được cung cấp.
Bộ chọn thuộc tính & giá trị: [target = “_ blank”]
Chọn các phần tử có thuộc tính và giá trị được cung cấp.
Thuộc tính & Một trong Nhiều Giá trị: [class ~ = “large”]
Chọn các phần tử nếu giá trị là một phần của danh sách giá trị được phân tách bằng khoảng trắng.
Thuộc tính & Bắt đầu của một Giá trị: [target ^ = “_ b”]
Chọn các phần tử có giá trị cho một thuộc tính bắt đầu bằng chuỗi được cung cấp.
Thuộc tính & Kết thúc Giá trị: [target $ = “nk”]
Chọn các phần tử có giá trị cho một thuộc tính kết thúc bằng chuỗi được cung cấp.
Thuộc tính và một phần của giá trị: [target * = “lan”]
Chọn các phần tử có giá trị cho một thuộc tính chứa chuỗi con được cung cấp.
Thuộc tính & một phần của danh sách giá trị được phân tách bằng dấu gạch ngang: [lang | = “zu”]
Chọn các phần tử nếu giá trị là phần bên trái trong danh sách được phân tách bằng dấu gạch ngang.
Bộ chọn con cháu: nhịp h2
Chọn (các) phần tử được cung cấp ở bên phải nếu nó là con của phần tử bên trái.
Bộ chọn con: div> p
Chọn (các) phần tử được cung cấp ở bên phải nếu nó là con trực tiếp của phần tử bên trái.
Bộ chọn Anh chị em Liền kề: div + p
Chọn phần tử được cung cấp ở bên phải nếu nó nằm ngay trước phần tử ở bên trái.
Bộ chọn anh chị em chung: div ~ p
Chọn phần tử được cung cấp ở bên phải nếu nó đứng trước phần tử ở bên trái.
Bộ chọn Phủ định :: not (.first-par)
Chọn các phần tử không trùng với bộ chọn đơn giản được cung cấp trong dấu ngoặc đơn.
Yếu tố giả
:: before Pseudo-Element: p :: before
Đã tạo nội dung trước phần tử.
:: after Pseudo-Element: p :: sau
Nội dung được tạo sau phần tử.
:: Phần tử giả chữ cái đầu tiên: p :: chữ cái đầu tiên
Chữ cái đầu tiên của phần tử.
:: First-line Pseudo-Element: p :: first-line
Dòng đầu tiên của phần tử.
Cấu trúc Pseudo-Classes
nth-child (n): span: thứ n-con (5)
Chọn anh chị em thứ n nếu đó là loại được cung cấp.
nth-last-child (n): p: nth-last-child (4)
Đếm từ con cuối cùng, chọn anh chị em thứ n nếu đó là loại được cung cấp.
nth-of-type (n): span: thứ n-of-type (2)
Chọn anh chị em thứ n, chỉ đếm cùng loại.
nth-last-of-type (n): span: thứ n-last-of-type (3)
Đếm từ con cuối cùng và chỉ đếm loại đã cho, chọn anh chị em thứ n.
con đầu lòng: span: con đầu lòng
Chọn phần tử con đầu tiên của phần tử root nếu nó trùng với loại phần tử được cung cấp.
last-child: span: last-child
Chọn phần tử con cuối cùng của cha mẹ nếu nó phù hợp với loại phần tử được cung cấp.
đầu tiên của loại: span: loại đầu tiên
Chọn loại đầu tiên trong số các loại được cung cấp trong một phụ huynh.
last-of-type: span: last-of-type
Chọn loại cuối cùng của loại được cung cấp trong một phụ huynh.
only-child: span: only-child
Chọn phần tử nếu nó là phần tử con duy nhất của phần tử mẹ.
only-of-type: span: only-of-type
Chọn phần tử nếu nó là phần tử duy nhất thuộc loại của nó bên trong phần tử mẹ.
rỗng: div: trống
Chọn các phần tử không có con.
Liên kết Pseudo-Class
Liên kết: a: liên kết
Một liên kết chưa được truy cập. Điểm bắt đầu cho các liên kết
Đã thăm: a: đã thăm
Một liên kết đã được truy cập.
Lớp giả hành động của user
Hoạt động: a: hoạt động
Khi phần tử đang hoạt động.
Hover: a: hover
Khi thiết bị trỏ của user ở trên phần tử.
Tiêu điểm: a: tiêu điểm
Khi phần tử có tiêu điểm. Ví dụ: khi user nhấp vào bên trong trường nhập liệu, trường đó có tiêu điểm.
Target Pseudo-Class: p: target
Được chọn khi phần tử ở bên trái là mục tiêu hiện tại như được xác định bởi url.
lang Pseudo-Class :: lang (en)
(Các) phần tử có thuộc tính lang được chỉ định.
UI State Pseudo-Classes
Enabled: input: đã bật
Khi (các) phần tử ở bên trái được bật.
Đã tắt: đầu vào: bị vô hiệu hóa
Khi (các) phần tử bên trái bị tắt.
Đã kiểm tra: đầu vào: đã kiểm tra
Khi (các) phần tử bên trái được chọn. Được liên kết với đầu vào của loại radio hoặc hộp kiểm.
Lưu ý để nhắm đến nhiều bộ chọn trong một khai báo CSS, bạn sử dụng dấu phẩy giữa mỗi bộ chọn. Ví dụ sau đây chọn tất cả các phần tử <p> không có lớp article-par và cũng chọn tất cả các phần tử <h2> :
p:not(.article-par), h2 {
font-weight: bold;
}
Ngoài ra, nếu bạn muốn chọn một phần tử trong khi nhắm đến kết hợp nhiều lớp và / hoặc ID, bạn sẽ đơn giản ghi chú nhiều lớp và / hoặc ID mà không sử dụng khoảng cách giữa chúng. Ví dụ: nếu bạn muốn chọn và phần tử có các lớp btn và btn-large :
.btn.btn-large {
font-weight: bold;
}
Trong ví dụ trên, bạn không muốn bộ chọn của bạn là .btn .btn-Large , vì khi đó nó sẽ chọn các phần tử .btn-large là con của các phần tử .btn .
Bây giờ, giả sử rằng phần tử bạn muốn chọn cũng có ID là # main-btn :
#main-btn.btn.btn-large {
font-weight: bold;
}
Các tin liên quan
The: not Pseudo-Class trong CSS2016-07-06
Hàm CSS attr ()
2016-06-20
Radial Gradients trong CSS
2016-06-13
Ngữ pháp tuyến tính trong CSS
2016-06-12
CSS: so khớp () Pseudo-Class
2016-06-02
Giới thiệu ngắn gọn về các biến CSS (Thuộc tính tùy chỉnh)
2016-06-01
Phát hiện tính năng trong CSS với @supports
2016-05-05
Bộ chọn thuộc tính CSS
2016-02-05
Hàm calc () CSS
2015-10-08
Cách sử dụng Bộ tiền xử lý CSS LESS trên VPS Ubuntu
2014-01-27
