Hướng dẫn cách lấy css selector

Hãy tìm hiểu những cái dễ nhận thấy nhất, đối với những người mới bắt đầu, trước khi chúng ta di chuyển vào các bộ chọn cao cấp hơn.

Biểu tượng ngôi sao sẽ nhắm chọn mọi phần tử trên trang. Nhiều nhà phát triển sẽ sử dụng thủ thuật này để loại bỏ

a { color: red; }
ul { margin-left: 0; }
2 và
a { color: red; }
ul { margin-left: 0; }
3. Mặc dù đây là công cụ để nhanh chóng kiểm tra, nhưng tôi muốn khuyên bạn đừng bao giờ sử dụng nó trong code của sản phẩm cuối. 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 

a { color: red; }
ul { margin-left: 0; }
4 cũng có thể được sử dụng với các bộ chọn con.

#container * {
 border: 1px solid black;
}

Điều này sẽ chọn mọi phần tử mà là con của

a { color: red; }
ul { margin-left: 0; }
5
a { color: red; }
ul { margin-left: 0; }
6. Một lần nữa, cố gắng đừng làm dụng kỹ thuật này quá nhiều, nếu không muốn nói là đừng bao giờ.

Xem demo

Tương thích

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

2. #X

#container {
   width: 960px;
   margin: auto;
}

Gắn vào đằng trước biểu tượng # cho một bộ chọn cho phép chúng ta nhắm chọn bằng

li a {
  text-decoration: none;
}
9. Đây là một cách sử dụng dễ dàng và phổ biến nhất, tuy nhiên hãy thận trọng khi sử dụng bộ chọn
li a {
  text-decoration: none;
}
9.

Hãy tự hỏi mình: Tôi có cần phải áp dụng một

li a {
  text-decoration: none;
}
9 cho phần tử này để chọn nó không?

bộ chọn

li a {
  text-decoration: none;
}
9 là 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 giả.

Xem demo

Tương thích

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

3. .X

.error {
  color: red;
}

Đây là một bộ chọn

a { color: red; }
ul { margin-left: 0; }
0. Sự khác nhau giữa
li a {
  text-decoration: none;
}
9 và các
a { color: red; }
ul { margin-left: 0; }
0 đó là, với lớp, bạn có thể chọn nhiều phần tử. Sử dụng các
a { color: red; }
ul { margin-left: 0; }
0 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
li a {
  text-decoration: none;
}
9 để tìm một phần tử duy nhất, và chỉ định phong cách cho phần tử cụ thể đó.

Xem demo

Tương thích

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

4. X Y

li a {
  text-decoration: none;
}

Bộ chọn được nhắc đến nhiều nhất tiếp theo là chọn

a { color: red; }
ul { margin-left: 0; }
1. Khi bạn cần cụ thể hơn với các bộ chọn của bạn, thì bạn hãy sử dụng cái này. Ví dụ, sẽ ra sao nếu, thay vì nhắm chọn tất cả các thẻ liên kết, thì bạn chỉ cần nhắm chọn các liên kết mà nằm trong một danh sách có thứ tự? Đặc biệt khi bạn muốn sử dụng một bộ chọn các phần tử con.

Mẹo hay - Nếu bộ chọn của bạn trông giống như

a:link { color: red; }
a:visted { color: purple; }
7, thì bạn đang làm sai. Hãy luôn luôn tự hỏi mình nó có hoàn toàn cần thiết hay không khi áp dụng tất cả chúng.

Xem demo

Tương thích

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

5. X

a { color: red; }
ul { margin-left: 0; }

Điều gì xảy ra nếu bạn muốn nhắm chọn tất cả các phần tử trên một trang, theo

a:link { color: red; }
a:visted { color: purple; }
8 của chúng, chứ không phải là một
li a {
  text-decoration: none;
}
9 hoặc tên
a { color: red; }
ul { margin-left: 0; }
0? Hãy giữ cho nó đơn giản, và sử dụng một bộ chọn theo kiểu. Nếu bạn 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 + p {
   color: red;
}
1.

Xem demo

Tương thích

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera
a:link { color: red; }
a:visted { color: purple; }

Chúng ta sử dụng lớp giả

ul + p {
   color: red;
}
2 để 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ả

ul + p {
   color: red;
}
3, trong đó, như bạn thấy, 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.

Xem demo

Tương thích

  • IE7+
  • IE7+
  • Chrome
  • Safari
  • Opera

7. X + Y

ul + p {
   color: red;
}

Đâ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 + p {
   color: red;
}
4 sẽ có chữ màu đỏ.

Xem demo

Tương thích

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

8. X > Y

div#container > ul {
  border: 1px solid black;
}

Sự khác biệt giữa 

ul + p {
   color: red;
}
5 tiêu chuẩn và
ul + p {
   color: red;
}
6 đó 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.

   
  • List Item
    • Child
  • List Item
  • List Item
  • List Item

Một bộ chọn của

ul + p {
   color: red;
}
7 sẽ chỉ nhắm chọn các
ul + p {
   color: red;
}
4 mà là con trực tiếp của
a { color: red; }
ul { margin-left: 0; }
5 với một
li a {
  text-decoration: none;
}
9 là
div#container > ul {
  border: 1px solid black;
}
1. Nó sẽ không nhắm chọn, ví dụ,
ul + p {
   color: red;
}
4 mà là con của
div#container > ul {
  border: 1px solid black;
}
3 đầ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.

Xem demo

Tương thích

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Safari

9. X ~ Y

#container * {
 border: 1px solid black;
}
0

Sự kết hợp anh chị em này là tương tự như

div#container > ul {
  border: 1px solid black;
}
4, tuy nhiên, nó ít nghiêm ngặt hơn. Trong khi một bộ chọn liền kề (
div#container > ul {
  border: 1px solid black;
}
5) 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ử
div#container > ul {
  border: 1px solid black;
}
6, miễn là chúng theo sau một
ul + p {
   color: red;
}
4.

Xem demo

Tương thích

  • IE7+
  • Firefox
  • Chrome
  • Chrome
  • Opera

10. X[title]

#container * {
 border: 1px solid black;
}
1

Được xem là một bộ chọn thuộc tính, trong ví dụ trên, điều này sẽ chỉ chọn các thẻ liên kết có một thuộc tính

div#container > ul {
  border: 1px solid black;
}
8. Các thẻ liên kết không có sẽ không nhận được phong cách đặc biệt này. Nhưng nếu bạn cần cụ thể hơn thì sao? À...

Xem demo

Tương thích

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

11. X[href="foo"]

#container * {
 border: 1px solid black;
}
2

Đoạn code ở trên sẽ định phong cách cho tất cả các thẻ liên kết liên kết đến https://net.tutsplus.com; chúng sẽ nhận được màu xanh của chúng ta. Tất cả các thẻ liên kết khác sẽ không bị ảnh hưởng.

Lưu ý rằng chúng ta đang bao các giá trị trong dấu ngoặc kép. Đồng thời hãy nhớ làm điều này khi sử dụng công cụ chọn CSS dựa trên JavaScript. Khi có thể, hãy luôn luôn sử dụng các bộ chọn CSS3 thay vì các phương pháp không chính thức.

Tuy nhiên, điều này hoạt động tốt, hơi cứng nhắc một chút. Điều gì xảy ra nếu các liên kết không thực sự hướng đến Nettuts+, mà, có thể, đường dẫn nettuts.com thay vì url đầy đủ? Trong những trường hợp đó chúng ta có thể sử dụng một chút biểu thức chính quy.

Xem demo

Tương thích

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

12. X[href*="nettuts"]

#container * {
 border: 1px solid black;
}
3

Bạn thấy rồi đó; đó là những gì mà chúng ta cần. Cái ngôi sao chỉ định rằng giá trị phía sau phải xuất hiện ở đâu đó trong giá trị của thuộc tính. Bằng cách đó, nó bao hàm cả nettuts.com, net.tutsplus.com, và thậm chí tutsplus.com.

Hãy nhớ rằng đây là một bộ chọn rộng. Điều gì xảy ra nếu thẻ liên kết liên kết đến một số trang web không phải Envato với chuỗi tuts trong url? Khi bạn cần cụ thể hơn, hãy sử dụng

div#container > ul {
  border: 1px solid black;
}
9 và
   
  • List Item
    • Child
  • List Item
  • List Item
  • List Item
0, để tham chiếu bắt đầu và kết thúc của một chuỗi, tương ứng.

Xem demo

Tương thích

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

13. X[href^="http"]

#container * {
 border: 1px solid black;
}
4

Có bao giờ tự hỏi làm thế nào một số trang web có thể hiển thị một biểu tượng nhỏ bên cạnh các liên kết mà là liên kết bên ngoài? Tôi chắc là bạn đã nhìn thấy nó trước đây; chúng đang nhắc khéo rằng các liên kết sẽ chỉ dẫn bạn tới một trang web hoàn toàn khác nhau.

Đây là một biểu thức với biểu tượng dấu mũ. Nó thường được sử dụng nhiều nhất trong các biểu thức chính quy để chỉ về chuỗi bắt đầu của một chuỗi. Nếu chúng ta muốn nhắm chọn tất cả các thẻ liên kết có một

   
  • List Item
    • Child
  • List Item
  • List Item
  • List Item
1 bắt đầu bằng
   
  • List Item
    • Child
  • List Item
  • List Item
  • List Item
2, chúng ta có thể sử dụng một bộ chọn tương tự như đoạn code trên.

Lưu ý rằng chúng ta không tìm kiếm

   
  • List Item
    • Child
  • List Item
  • List Item
  • List Item
3; điều đó là không cần thiết, và không tính luôn các url mà bắt đầu bằng
   
  • List Item
    • Child
  • List Item
  • List Item
  • List Item
3.

Bây giờ, nếu chúng ta muốn thay phong cách cho tất cả các thẻ liên kết mà liên kết tới, ví dụ, một bức ảnh thì sao nhỉ? Trong những trường hợp đó, hãy tìm kiếm phần cuối của chuỗi.

Xem demo

Tương thích

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

14. X[href$=".jpg"]

#container * {
 border: 1px solid black;
}
5

Một lần nữa, chúng ta sử dụng một biểu tượng của biểu thức chính quy,

   
  • List Item
    • Child
  • List Item
  • List Item
  • List Item
0, để tham chiếu đến phần cuối của một chuỗi. Trong trường hợp này, chúng ta đang tìm kiếm tất cả các liên kết mà liên kết đến một hình ảnh - hoặc ít nhất là một url kết thúc bằng
   
  • List Item
    • Child
  • List Item
  • List Item
  • List Item
6. Hãy nhớ rằng điều này chắc chắn sẽ không làm việc cho
   
  • List Item
    • Child
  • List Item
  • List Item
  • List Item
7 và
   
  • List Item
    • Child
  • List Item
  • List Item
  • List Item
8.

Xem demo

Compatibility

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

15. X[data-*="foo"]

#container * {
 border: 1px solid black;
}
6

Xem lại phần số tám; làm thế nào để chúng ta bù vào tất cả các kiểu hình ảnh khác:

   
  • List Item
    • Child
  • List Item
  • List Item
  • List Item
8,
#container * {
 border: 1px solid black;
}
00,
#container * {
 border: 1px solid black;
}
01,
   
  • List Item
    • Child
  • List Item
  • List Item
  • List Item
7? Vâng, chúng ta có thể tạo nhiều bộ chọn, chẳng hạn như:

#container * {
 border: 1px solid black;
}
7

Nhưng, đó là cách rất chậm, và không hiệu quả. Một giải pháp có thể là sử dụng các thuộc tính tùy chỉnh. Nếu chúng ta thêm thuộc tính

#container * {
 border: 1px solid black;
}
03 riêng của chúng ta vào mỗi liên kết mà liên kết đến một hình ảnh thì sao?

#container * {
 border: 1px solid black;
}
8

Sau đó, với cái móc đó, chúng ta có thể sử dụng một bộ chọn thuộc tính tiêu chuẩn để chỉ nhắm chọn những liên kết đó.

#container * {
 border: 1px solid black;
}
6

Xem demo

Tương thích

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

16. X[foo~="bar"]

#container {
   width: 960px;
   margin: auto;
}
0

Dưới đây là một cái đặc biệt mà sẽ gây ấn tượng với bạn bè của bạn. Không quá nhiều người biết về thủ thuật này. Biểu tượng

#container * {
 border: 1px solid black;
}
04 cho phép chúng ta nhắm chọn một thuộc tính trong đó có một danh sách các giá trị được phân chia bởi khoảng trắng.

Cùng với thuộc tính tùy chỉnh của chúng ta từ phần số 15, ở trên, chúng ta có thể tạo ra một thuộc tính

#container * {
 border: 1px solid black;
}
05, có thể nhận một danh sách phân chia bởi khoảng trắng của bất cứ điều gì chúng ta cần phải lưu ý đến. Trong trường hợp này, chúng ta sẽ để ý đến các liên kết bên ngoài và các liên kết đến hình ảnh - ví dụ như vậy.

#container {
   width: 960px;
   margin: auto;
}
1

Với mã đánh dấu đã có, bây giờ chúng ta có thể nhắm chọn bất kỳ thẻ nào có một trong những giá trị đó, bằng cách sử dụng bộ chọn thuộc tính ~.

#container {
   width: 960px;
   margin: auto;
}
2

Khá tiện lợi, phải không?

Xem demo

Tương thích

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

17. X:checked

#container {
   width: 960px;
   margin: auto;
}
3

Lớp giả này sẽ chỉ nhắm chọn một phần tử giao diện người dùng đã được tích chọn - giống như một nút radio, hoặc checkbox. Nó chỉ đơn giản như vậy.

Xem demo

Tương thích

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

18. X:after

Các lớp giả

#container * {
 border: 1px solid black;
}
06 và
#container * {
 border: 1px solid black;
}
07 rất hiệu quả. Mỗi ngày, có vẻ như, mọi người đang tìm kiếm những cách thức mới và sáng tạo để sử dụng chúng một cách hiệu quả. Chúng chỉ đơn giản là tạo ra nội dung xung quanh thành phần được chọn.

Nhiều người lần đầu biết được các lớp này khi họ gặp vấn đề về clear-fix.

#container {
   width: 960px;
   margin: auto;
}
4

Cách giải quyết này sử dụng lớp giả

#container * {
 border: 1px solid black;
}
08 để nối thêm một khoảng trắng phía sau phần tử, và sau đó clear nó. Đây là một mẹo tuyệt vời cần có trong bộ công cụ của bạn, đặc biệt là trong các trường hợp khi
#container * {
 border: 1px solid black;
}
09 là không thể.

Đối với trường hợp sử dụng sáng tạo khác, hãy tham khảo mẹo nhanh của tôi trong việc tạo ra bóng đổ.

Theo các đặc điểm kỹ thuật của các bộ chọn CSS3, về mặt kỹ thuật bạn nên sử dụng các cú pháp phần tử giả với dấu hai dấu hai chấm

#container * {
 border: 1px solid black;
}
10. Tuy nhiên, để duy trì tương thích, user-agent sẽ chấp nhận một cách sử dụng một dấu hai chấm. Trong thực tế, vào thời điểm này, tốt hơn là nên sử dụng phiên bản một dấu hai chấm trong các dự án của bạn.

Tương thích

  • IE8+
  • Firefox
  • Chrome
  • Safari
  • Opera

19. X:hover

#container {
   width: 960px;
   margin: auto;
}
5

Thôi nào. Bạn biết cái này. Thuật ngữ chính thức cho việc này là

#container * {
 border: 1px solid black;
}
11. Nghe có vẻ khó hiểu, nhưng nó thực sự không có gì khó hiểu cả. Bạn muốn áp dụng phong cách cụ thể khi người dùng di chuyển chuột qua một phần tử phải không? Nó sẽ giúp bạn hoàn thành công việc!

Hãy nhớ rằng phiên bản cũ của Internet Explorer không phản hồi khi lớp giả

#container * {
 border: 1px solid black;
}
12 được áp dụng cho bất cứ thứ gì khác ngoài một thẻ liên kết.

Bạn sẽ thường xuyên sử dụng bộ chọn này khi áp dụng, ví dụ, một

#container * {
 border: 1px solid black;
}
13 vào thẻ liên kết, khi di chuyển chuột qua.

#container {
   width: 960px;
   margin: auto;
}
6

Mẹo hay -

#container * {
 border: 1px solid black;
}
14 trông tốt hơn so với
#container * {
 border: 1px solid black;
}
15;.

Tương thích

  • IE6 + (Trong IE6, :hover phải được áp dụng cho một phần tử liên kết)
  • Firefox
  • Chrome
  • Safari
  • Opera

20. X:not(selector)

#container {
   width: 960px;
   margin: auto;
}
7

Lớp giả

#container * {
 border: 1px solid black;
}
16 là đặc biệt hữu ích. Giả sử rằng tôi muốn chọn tất cả các thẻ div, ngoại trừ một cái trong đó có một
li a {
  text-decoration: none;
}
9 là
div#container > ul {
  border: 1px solid black;
}
1. Đoạn code ở trên sẽ xử lý nhiệm vụ đó một cách hoàn hảo.

Hoặc, nếu tôi muốn chọn tất cả các phần tử (không nên), trừ các thẻ cho đoạn văn, chúng ta có thể làm:

#container {
   width: 960px;
   margin: auto;
}
8

Xem demo

Tương thích

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

21. X::phần tử giả

#container {
   width: 960px;
   margin: auto;
}
9

Chúng ta có thể sử dụng các phần tử giả (được chỉ định bởi

#container * {
 border: 1px solid black;
}
10) để định phong cách cho các mảnh của một phần tử, chẳng hạn như dòng đầu tiên, hoặc chữ cái đầu tiên. Hãy nhớ rằng những cái này phải được áp dụng vào các phần tử cấp độ khối để đạt được hiệu quả.

Một phần tử giả gồm có hai dấu hai chấm:

#container * {
 border: 1px solid black;
}
10

Nhắm chọn ký tự đầu tiên của đoạn văn

.error {
  color: red;
}
0

Đoạn code này là một minh hoạ cho việc tìm tất cả các đoạn văn trên trang, và sau đó chỉ chọn chữ cái đầu tiên của phần tử đó.

Điều này thường được sử dụng để tạo ra phong cách giống với báo chí cho chữ cái đầu tiên của một bài báo.

Chọn dòn đầu tiên của đoạn văn

#container {
   width: 960px;
   margin: auto;
}
9

Tương tự như vậy, phần tử giả

#container * {
 border: 1px solid black;
}
21 sẽ, như kỳ vọng, chỉ định phong cách dòng đầu tiên của phần tử.

"Đối với khả năng tương thích với stylesheet hiện có, user-agent cũng phải chấp nhận ký hiệu một dấu hai chấm cho các phần tử giả được giới thiệu ở CSS cấp độ 1 và 2 (cụ thể là, :first-line, :first-letter, :before và :after). Khả năng tương thích này không được phép cho các phần tử giả mới được giới thiệu trong đặc tả này. " - Nguồn

Xem demo

Tương thích

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

22. X:nth-child(n)

.error {
  color: red;
}
2

Còn nhớ những ngày khi chúng ta không có cách nào để chọn các phần tử cụ thể trong một ngăn xếp không? Lớp giả

#container * {
 border: 1px solid black;
}
22 sẽ giải quyết điều đó!

Tuy nhiên, xin lưu ý rằng

#container * {
 border: 1px solid black;
}
22 chấp nhận một số nguyên như là một tham số, nó không dựa vào số 0 làm chỉ số đầu tiên. Nếu bạn muốn chọn phần tử danh sách thứ hai, sử dụng
#container * {
 border: 1px solid black;
}
24.

Chúng ta thậm chí có thể sử dụng điều này để chọn một tập hợp các phần tử con. Ví dụ, chúng ta có thể làm cho

#container * {
 border: 1px solid black;
}
25 chọn tất cả các phần cách sau mỗi bốn phần trong danh sách.

Xem demo

Tương thích

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari

23. X:nth-last-child(n)

.error {
  color: red;
}
3

Điều gì xảy ra nếu bạn có một danh sách rất lớn các phần tử trong một

ul + p {
   color: red;
}
4, và chỉ cần truy cập, ví dụ, phần tử thứ ba đến phần tử cuối cùng? Thay vì thực hiện
#container * {
 border: 1px solid black;
}
27, thay vào đó bạn có thể sử dụng lớp giả
#container * {
 border: 1px solid black;
}
28.

Kỹ thuật này hoạt động gần giống với số 16 ở trên, tuy nhiên, sự khác biệt là nó bắt đầu vào cuối của tập hợp, và quay ngược trở lại.

Xem demo

Tương thích

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera

24. X:nth-of-type(n)

.error {
  color: red;
}
4

Sẽ có lúc, thay vì chọn một

a { color: red; }
ul { margin-left: 0; }
1, bạn cần phải chọn theo
a:link { color: red; }
a:visted { color: purple; }
8 của phần tử.

Hãy tưởng tượng mã đánh dấu bao gồm năm danh sách không có thứ tự. Nếu bạn muốn chỉ định phong cách cho

ul + p {
   color: red;
}
4 thứ ba, và không có một
li a {
  text-decoration: none;
}
9 để chọn, bạn có thể sử dụng các lớp giả
#container * {
 border: 1px solid black;
}
33. Trong đoạn code ở trên, chỉ
ul + p {
   color: red;
}
4 thứ ba sẽ có một đường viền xung quanh nó.

Xem demo

Tương thích

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari

25. X:nth-last-of-type(n)

.error {
  color: red;
}
5

Và vâng, để thống nhất, chúng ta cũng có thể sử dụng

#container * {
 border: 1px solid black;
}
35 để bắt đầu vào cuối danh sách bộ chọn, và lần ngược trở lại để chọn phần tử mong muốn.

Tương thích

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera

26. X:first-child

.error {
  color: red;
}
6

Lớp giả này cho phép chúng ta chỉ chọn phần tử con đầu tiên của phần tử cha. Bạn sẽ thường sử dụng điều này để loại border khỏi phần tử đầu tiên và cuối cùng.

Ví dụ: giả sử bạn có một danh sách các hàng, và mỗi cái đều có

#container * {
 border: 1px solid black;
}
36 và một
#container * {
 border: 1px solid black;
}
13. Vâng, với sự sắp xếp đó, phần tử đầu tiên và cuối cùng trong tập hợp đó sẽ trông hơi khác.

Nhiều nhà thiết kế áp dụng các lớp

#container * {
 border: 1px solid black;
}
38 và
#container * {
 border: 1px solid black;
}
39 để bù đắp cho việc này. Thay vào đó, bạn có thể sử dụng các lớp giả này.

Xem demo

Tương thích

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

27. X:last-child

.error {
  color: red;
}
7

Ngược lại của

#container * {
 border: 1px solid black;
}
40, 
#container * {
 border: 1px solid black;
}
41 sẽ chọn phần tử con cuối cùng của phần tử cha.

Ví dụ

Hãy xây dựng một ví dụ đơn giản để minh hoạ một khả năng sử dụng của các lớp này. Chúng ta sẽ tạo ra một danh sách các phần tử.

Mã đánh dấu

.error {
  color: red;
}
8

Không có gì đặc biệt ở đây; chỉ là một danh sách đơn giản.

CSS

.error {
  color: red;
}
9

Phong cách này sẽ thiết lập một nền, loại bỏ padding mặc định của trình duyệt trên

ul + p {
   color: red;
}
4, và áp dụng border vào từng
div#container > ul {
  border: 1px solid black;
}
3 để thêm một chút chiều sâu.

Hướng dẫn cách lấy css selector
Hướng dẫn cách lấy css selector
Hướng dẫn cách lấy css selector

Để thêm chiều sâu cho danh sách của bạn, áp dụng

#container * {
 border: 1px solid black;
}
13 vào từng
div#container > ul {
  border: 1px solid black;
}
3 màu tối hơn màu nền của
div#container > ul {
  border: 1px solid black;
}
3. Tiếp theo, áp dụng
#container * {
 border: 1px solid black;
}
36 với một vài sắc thái nhẹ hơn.

Vấn đề duy nhất, như thể hiện trong hình trên, là một border sẽ không được áp dụng cho phần trên và dưới cùng của danh sách không có thứ tự - trông nó hơi khác. Hãy sử dụng các lớp giả

#container * {
 border: 1px solid black;
}
48 và
#container * {
 border: 1px solid black;
}
49 để khắc phục điều này.

li a {
  text-decoration: none;
}
0

Hướng dẫn cách lấy css selector
Hướng dẫn cách lấy css selector
Hướng dẫn cách lấy css selector

Bạn thấy đó; điều này đã khắc phục được nó!

Xem demo

Tương thích

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

À - IE8 hỗ trợ

#container * {
 border: 1px solid black;
}
48, nhưng không
#container * {
 border: 1px solid black;
}
49. Hãy tìm cách khắc phục.

28. X:only-child

li a {
  text-decoration: none;
}
1

Thành thật mà nói, có thể bạn sẽ thấy rằng mình không sử dụng lớp giả

#container * {
 border: 1px solid black;
}
52 thường xuyên. Tuy nhiên, nó có sẵn, bạn sẽ cần nó.

Nó cho phép bạn chọn các phần tử mà là con duy nhất của phần tử cha. Ví dụ, tham khảo đoạn code ở trên, chỉ có đoạn đó là con duy nhất của

a { color: red; }
ul { margin-left: 0; }
5 sẽ có màu đỏ.

Giả sử mã dấu sau.

li a {
  text-decoration: none;
}
2

Trong trường hợp này, đoạn văn của

a { color: red; }
ul { margin-left: 0; }
5 thứ hai sẽ không được chọn; chỉ
a { color: red; }
ul { margin-left: 0; }
5 đầu tiên. Ngay sau khi bạn áp dụng nhiều hơn một con vào một phần tử, thì lớp giả
#container * {
 border: 1px solid black;
}
52 không còn có hiệu lực.

Xem demo

Tương thích

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

29. X:only-of-type

li a {
  text-decoration: none;
}
3

Lớp giả này có thể được sử dụng theo một số cách khéo léo. Nó sẽ chọn các phần tử mà không có anh chị em trong container cha của nó. Ví dụ, chúng ta hãy chọn tất cả

ul + p {
   color: red;
}
4, mà chỉ có một phần tử duy nhất.

Đầu tiên, hãy tự hỏi làm thế nào bạn thực hiện nhiệm vụ này? Bạn có thể làm

#container * {
 border: 1px solid black;
}
58, nhưng, điều này sẽ chọn tất cả các phần tử trong list. Giải pháp duy nhất để sử dụng là
#container * {
 border: 1px solid black;
}
59.

li a {
  text-decoration: none;
}
4

Xem demo

Tương thích

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera

30. X:first-of-type

Lớp giả

#container * {
 border: 1px solid black;
}
60 cho phép bạn chọn các anh chị em đầu tiên của cùng kiểu.

Thử nghiệm

Để hiểu rõ hơn về điều này, chúng ta hãy thực hiện một bài kiểm tra. Sao chép sau mã đánh dấu sau vào trình soạn thảo code của bạn:

li a {
  text-decoration: none;
}
5

Bây giờ, không đọc thêm nữa, cố gắng tìm cách để chỉ chọn "List Item 2". Khi bạn đã tìm ra cách (hoặc bỏ cuộc), hãy đọc tiếp.

Giải pháp 1

Có nhiều cách khác nhau để giải quyết bài kiểm tra này. Chúng ta sẽ xem xét một số ít trong số chúng. Hãy bắt đầu bằng cách sử dụng

#container * {
 border: 1px solid black;
}
60.

li a {
  text-decoration: none;
}
6

Đoạn này chủ yếu nói, "tìm danh sách không có thứ tự đầu tiên trên trang, sau đó tìm phần tử con ngay sau, mà là danh sách các phần tử. Tiếp theo, lọc nó đến chỉ phần tử danh sách thứ hai trong bộ đó.

Giải pháp 2

Một lựa chọn khác là sử dụng bộ chọn liền kề.

li a {
  text-decoration: none;
}
7

Trong trường hợp này, chúng ta tìm thấy

ul + p {
   color: red;
}
4 đó ngay trước thẻ
div#container > ul {
  border: 1px solid black;
}
6, và sau đó tìm con cuối cùng của phần tử.

Giải pháp 3

Chúng ta có thể làm cho phức tạp hay đơn giản tuỳ chúng ta muốn với các bộ chọn.

li a {
  text-decoration: none;
}
8

Lần này, chúng ta lấy

ul + p {
   color: red;
}
4 đầu tiên trên trang, và sau đó tìm phần tử danh sách đầu tiên, nhưng bắt đầu từ phía dưới! :)

Xem demo

Tương thích

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera

Tổng kết

Nếu bạn đang hỗ trợ cho các trình duyệt cũ như Internet Explorer 6, thì bạn vẫn cần phải cẩn thận khi sử dụng các bộ chọn mới hơn. Nhưng, hãy đừng để điều đó ngăn cản bạn khỏi việc học này. Bạn có thể làm hại chính mình. Hãy chắc chắn tham khảo ở đây để có danh sách trình duyệt tương thích. Ngoài ra, bạn có thể sử dụng script IE9.js của Dean Edward để mang lại hỗ trợ cho các bộ chọn vào trình duyệt cũ.

Thứ hai, khi làm việc với các thư viện JavaScript như jQuery phổ biến, hãy luôn luôn cố gắng sử dụng những bộ chọn CSS3 gốc thay vì các phương thức/bộ chọn của các thư viện tuỳ biến, khi có thể. Nó sẽ làm cho code của bạn nhanh hơn, vì cơ chế chọn có thể sử dụng phân tích cú pháp bản địa của trình duyệt, thay vì của riêng của nó.