Bài viết này mình xin được tổng hợp lại các bộ chọn CSS cần nhớ.
1. *
1 2 3 4 5 | <span class="token selector">*</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Biểu tượng * sẽ nhắm chọn tất cả các phần tử trên trang. Ở code trên, sử dụng thủ thuật này để loại bỏ margin và padding của tất các các phần tử trên trang. Mặc dù đây là công cụ để nhanh chóng kiểm tra, nhưng chúng ta đừng bao giờ sử dụng nó trong code. Nó thêm quá nhiều gánh nặng cho trình duyệt, và là không cần thiết.
Dấu * cũng có thể được sử dụng với các bộ chọn con.
1 2 3 4 | <span class="token selector">#container *</span> <span class="token punctuation">{</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Điều này sẽ chọn mọi phần tử mà là con của #container. Một lần nữa, chúng ta đừng lạm dụng kỹ thuật này quá nhiều.
Tương thích
- IE6+
- Firefox
- Chrome
- Safari
- Opera
2. #X
1 2 3 4 5 | <span class="token selector">#container</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 960px<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Gắn vào đằng trước biểu tượng # cho một bộ chọn cho phép chúng ta chọn bằng id. Và css tương ứng này sẽ được áp dụng duy nhất cho 1 phần tử có id=”X”. Đây là một cách sử dụng dễ dàng và phổ biến nhất. Nhưng nó cứng nhắc và không cho phép tái sử dụng. Nếu có thể, trước tiên cố gắng sử dụng một tên thẻ, một trong những phần tử HTML5 mới, hoặc thậm chí là một lớp.
Tương thích
- IE6+
- Firefox
- Chrome
- Safari
- Opera
3. .X
1 2 3 4 | <span class="token selector">.error</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Đây là một bộ chọn lớp (class). Sự khác nhau giữa id và các class đó là, với class, bạn có thể chọn nhiều phần tử. Sử dụng các class khi bạn muốn phong cách của bạn được áp dụng cho một nhóm các phần tử. Ngoài ra, sử dụng id để tìm một phần tử duy nhất, và chỉ định css cho 1 phần tử cụ thể.
Tương thích
- IE6+
- Firefox
- Chrome
- Safari
- Opera
4. X Y
1 2 3 4 | <span class="token selector">li a</span> <span class="token punctuation">{</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Bộ chọn được nhắc đến nhiều nhất tiếp theo là chọn phần tử con. Khi ta cần cụ thể hơn với các bộ chọn, thì ta hãy sử dụng cái này.
Ví dụ trên có nghĩa là tất cả các tag a nằm trong tag li thì đều mang giá trị css text-decoration: none. X Y chỉ là đại diện cho selector. Không nhất thiết phải là tag element. Ta có thể hoặc xen kẽ thêm nhiều tấng id, class, type selector.
1 2 3 4 | <span class="token selector">#table td.title</span> <span class="token punctuation">{</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Tương thích
- IE6+
- Firefox
- Chrome
- Safari
- Opera
5. X
1 2 3 4 5 6 7 8 | <span class="token selector">a</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">ul</span> <span class="token punctuation">{</span> <span class="token property">margin-left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Điều gì xảy ra nếu ta muốn nhắm chọn tất cả các phần tử trên một trang, theo kiểu của chúng, chứ không phải là một id hoặc tên lớp. Hãy giữ cho nó đơn giản, và sử dụng một bộ chọn theo kiểu. Nếu ta cần nhắm chọn tất cả các danh sách không có thứ tự, hãy sử dụng ul { }.
Tương thích
- IE6+
- Firefox
- Chrome
- Safari
- Opera
6. X + Y
1 2 3 4 | <span class="token selector">ul + p</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Đây được gọi là một bộ chọn liền kề. Nó sẽ chỉ chọn các phần tử mà nằm ngay sau phần tử trước đó. Trong trường hợp này, chỉ có đoạn văn đầu tiên sau mỗi ul sẽ có chữ màu đỏ.
Tương thích
- IE7+
- Firefox
- Chrome
- Safari
- Opera
7. X > Y
1 2 3 4 | <span class="token selector">div#container > ul</span> <span class="token punctuation">{</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Sự khác biệt giữa X Y và X > Y đó là cái sau sẽ chỉ chọn phần tử con trực tiếp. Ví dụ, hãy xem xét mã đánh dấu sau.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> List Item <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> Child <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> List Item <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> List Item <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> List Item <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
Một bộ chọn của #container > ul sẽ chỉ chọn các ul mà là con trực tiếp của div với một id là container. Nó sẽ không chọn ul mà là con của li đầu tiên.
Vì lý do này, có những lợi ích về hiệu năng trong việc sử dụng các con kết hợp. Trong thực tế, nó được khuyến khuyến sử dụng đặc biệt là khi làm việc với các công cụ chọn CSS dựa trên JavaScript.
Tương thích
- IE7+
- Firefox
- Chrome
- Safari
- Opera
8. X ~ Y
1 2 3 4 | <span class="token selector">ul ~ p</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Sự kết hợp này là tương tự như X + Y, tuy nhiên, nó ít nghiêm ngặt hơn. Trong khi một bộ chọn liền kề (ul + p) sẽ chỉ chọn phần tử đầu tiên ngay sau đó, thì cái này là tổng quát hơn. Nó sẽ chọn, lấy ví dụ trên, bất kỳ phần tử p, miễn là chúng theo sau một ul.
Tương thích
- IE7+
- Firefox
- Chrome
- Chrome
- Opera
9. X:visited và X:link
1 2 3 4 5 6 7 8 | <span class="token selector">a:link</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">a:visted</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> purple<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Chúng ta sử dụng lớp giả :link để nhắm chọn tất cả các thẻ liên kết mà vẫn chưa được nhấp vào.
Ngoài ra, chúng ta cũng có lớp giả :visited, cho phép chúng ta áp dụng phong cách cụ thể đến chỉ các thẻ liên kết trên trang đã được nhấp vào, hoặc đã truy cập.
Tương thích
- IE7+
- Chrome
- Safari
- Opera
Tổng hợp
Mình xin tổng hợp lại thành bảng dưới đây.
| Bộ chọn | Ví dụ | Mô tả các ví dụ CSS | Phiên bản CSS |
|---|---|---|---|
| .X | .intro | Chọn tất cả các phần tử có class=”intro” | 1 |
| #X | #firstname | Chọn tất cả các phần tử có id=”firstname” | 1 |
| * | * | Chọn tất cả các phần tử | 2 |
| X | p | Chọn tất cả các phần tử | 1 |
| X, Y | div, p | Chọn tất cả các phần tử và phần tử <p> | 1 |
| X Y | div p | Chọn tất cả các phần tử <p> và bên trong phần tử <div> | 1 |
| X > Y | div > p | Chọn tất cả các phần tử <p> có phần tử cha là <div> | 2 |
| X + Y | div + p | Chọn tất cả các phần tử <p> được đặt phía sau phần tử <div> | 2 |
| X ~ Y | p ~ ul | Chọn tất cả các phần tử <ul> được đặt trước bởi một phần tử <p> | 3 |
| X:link | a:link | Chọn tất cả các liên kết khi chưa được click | 1 |
| X:visited | a:visited | Chọn tất cả các liên kết được truy cập | 1 |
Bài viết của mình đến đây là kết thúc. Hy vọng nó sẽ hữu ích phần nào đó cho các bạn trong quá trình học tập cũng như làm việc. Bài viết cũng khó tránh khỏi những sai xót, mong mọi người thông cảm, và rất mong những ý kiến đóng góp của mọi người để bài viết được hoàn thiện hơn.