Cái nhìn về bộ chọn cấu trúc đầu tiên của CSS3
Một điều mà tôi yêu thích về CSS3 là việc bổ sung các công cụ chọn mới cho phép chúng tôi nhắm mục tiêu các yếu tố cụ thể mà không cần dựa vào lớp học, ID hoặc thuộc tính thành phần khác và một thuộc tính mà chúng tôi sẽ đề cập ở đây là bộ chọn sau, : loại đầu tiên.
Các : loại đầu tiên bộ chọn sẽ nhắm mục tiêu con đầu tiên của phần tử được chỉ định, ví dụ: đoạn mã bên dưới sẽ nhắm mục tiêu đầu tiên h2 trên trang web.
h2: khai báo kiểu / * kiểu đầu tiên * /
Các : loại đầu tiên cũng bằng : loại thứ n (1), vì vậy thay vì chỉ chọn Đầu tiên thuộc loại, chúng ta có thể chọn thêm thứ hai, thứ ba và vv. Đoạn mã sau sẽ nhắm mục tiêu thứ hai h2 yếu tố trên trang web.
h2: khai báo kiểu thứ n (2) / * * /
: loại đầu tiên” đấu với. “: con đầu lòng”
Có vẻ như hai bộ chọn này đang làm điều tương tự, nhưng đó không phải là trường hợp. Hãy xem phần trình diễn sau:
Giả sử chúng ta có năm phần tử đoạn được gói trong một div, như thế này:
Thực dụng 1
Thực dụng 2
Thực vật 3
Thực dụng 4
Thực dụng 5
Bây giờ, chúng tôi muốn chọn đoạn đầu tiên bằng cách sử dụng : con đầu lòng bộ chọn.
p: con đầu lòng padding: 5px 10px; bán kính đường viền: 2px; nền: # 8960a7; màu: #fff; viền: 1px solid # 5b456a;
Và như chúng tôi đã dự đoán, đoạn đầu tiên được chọn thành công.
- : Demo con đầu lòng
Tuy nhiên, khi chúng ta thêm một yếu tố khác trước đoạn đầu tiên, hãy nói một h1, như đoạn trích dưới đây:
Nhóm 1
Thực dụng 1
Thực dụng 2
Thực vật 3
Thực dụng 4
Thực dụng 5
đoạn đầu tiên sẽ không được chọn, là đứa trẻ đầu tiên bên trong div Là không còn là một đoạn, nhưng bây giờ là một h1.
Vì vậy, đây là tình huống : loại đầu tiên bộ chọn để giải quyết vấn đề.
p: loại đầu tiên padding: 5px 10px; bán kính đường viền: 2px; nền: # a8b700; màu: #fff; viền: 1px solid # 597500;
- : bản demo đầu tiên
Các “Cuối cùng” Bộ chọn
Ở đâu có “Đầu tiên”, sau đó cũng sẽ có “Cuối cùng”.
Mặt trái của hai bộ chọn mà chúng ta đã thảo luận ở trên là hai bộ chọn sau; các :con cuối cùng và : loại cuối cùng. Chúng cơ bản giống như hai cái trên, ngoại trừ chúng nhắm mục tiêu con cuối cùng của phần tử được chỉ định.
Ví dụ: đoạn mã dưới đây sẽ nhắm mục tiêu đoạn cuối cùng bên trong div.
p: con cuối cùng padding: 5px 10px; bán kính đường viền: 2px; nền: # 8960a7; màu: #fff; viền: 1px solid # 5b456a;
- : bản demo con cuối
Và đoạn trích này cũng sẽ nhắm mục tiêu đoạn cuối cùng trong tình huống tương tự như chúng ta đã thảo luận ở trên; lần này là được theo dõi trực tiếp bởi một yếu tố khác.
p: loại cuối cùng padding: 5px 10px; bán kính đường viền: 2px; nền: # a8b700; màu: #fff; viền: 1px solid # 597500;
- : bản thử nghiệm cuối cùng
Lựa chọn
Giống như bất kỳ tính năng mới nào khác trong CSS3, các bộ chọn này không được hỗ trợ trong các trình duyệt cũ, chủ yếu là Internet Explorer 6 đến 8, với một ngoại lệ cho : con đầu lòng bộ chọn, vì nó đã được thêm vào từ CSS2.1. Nó tương đối :con cuối cùng chỉ được thêm vào CSS3.
Vì vậy, nếu tất cả các bộ chọn mà chúng tôi đã đề cập ở đây thực sự cần thiết cho webite của bạn, bạn có thể sử dụng Thư viện JavaScript được gọi là Chọn lọc để mô phỏng chức năng của bộ chọn CSS3.
Selectivizr phụ thuộc vào các Thư viện JavaScript khác để hoạt động, chẳng hạn như jQuery, Dojo, Prototype và MooTools; và nhìn từ bảng so sánh trong trang web chính thức, MooTools dường như có thể xử lý tất cả các công cụ chọn.
Vì vậy, hãy bao gồm nó cùng với Selectivizr, như sau:
Nhận xét có điều kiện ở trên sẽ đảm bảo rằng các thư viện này sẽ chỉ được tải trong Internet Explorer 8 trở xuống.
Cuối cùng, bạn có thể xem bản demo từ các liên kết sau và giờ đây nó sẽ hoạt động cả trong các trình duyệt hiện đại và cũ (IE8 trở xuống). Bạn cũng có thể tải tập tin nguồn để kiểm tra thêm. Thưởng thức.
- Bản giới thiệu
- Tải xuống nguồn
