Hướng dẫn has trong css - has in css

Thành phần p

Hiển thị trình duyệt:

$(':has(p)') chọn thành phần div khi thành phần div với điều kiện là có thành phần p.

Giả sử mã dấu sau.

1. * *

* {
 margin: 0;
 padding: 0;
}

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

li a {
  text-decoration: none;
}

li a {
  text-decoration: none;
}

* {
 margin: 0;
 padding: 0;
}

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ả

a:link { color: red; }
a:visted { color: purple; }

Đầ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

* {
 margin: 0;
 padding: 0;
}

* {
 margin: 0;
 padding: 0;
}

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

Firefox 3.5+

Xem demo

Tương thích

• Lớp giả

  * {
   margin: 0;
   padding: 0;
  }

  61 cho phép bạn chọn các anh chị em đầu tiên của cùng kiểu.
• Firefox
• Chrome
• Safari
• Opera

2. #X #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;
}

li a {
  text-decoration: none;
}

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

li a {
  text-decoration: none;
}

0 cho phần tử này để chọn nó không?

bộ chọn

li a {
  text-decoration: none;
}

Xem demo

Tương thích

• IE6+
• Firefox
• Chrome
• Safari
• Opera

3. .X .X

.error {
  color: red;
}

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

li a {
  text-decoration: none;
}

li a {
  text-decoration: none;
}

li a {
  text-decoration: none;
}

li a {
  text-decoration: none;
}

li a {
  text-decoration: none;
}

Xem demo

Tương thích

• IE6+
• Firefox
• Chrome
• Safari
• Opera

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

li a {
  text-decoration: none;
}

4. X Y

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

li a {
  text-decoration: none;
}

2. 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. - Nếu bộ chọn của bạn trông giống như

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

8, 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 X

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

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

li a {
  text-decoration: none;
}

li a {
  text-decoration: none;
}

li a {
  text-decoration: none;
}

li a {
  text-decoration: none;
}

li a {
  text-decoration: none;
}

Xem demo

Tương thích

• IE6+
• Firefox
• Chrome
• Safari
• Opera

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

a:link { color: red; }
a:visted { color: purple; }

4. X Y

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

li a {
  text-decoration: none;
}

Xem demo

Tương thích

• IE6+
• IE6+
• Chrome
• Safari
• Opera

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

ul + p {
   color: red;
}

4. X Y

Xem demo

Tương thích

• IE6+
• Firefox
• Chrome
• Safari
• Opera

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

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

4. X Y

* {
 margin: 0;
 padding: 0;
}

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

li a {
  text-decoration: none;
}

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

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

Xem demo

Tương thích

• IE6+
• Firefox
• Chrome
• Safari
• Safari

Opera  X ~ Y

* {
 margin: 0;
 padding: 0;
}

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

li a {
  text-decoration: none;
}

li a {
  text-decoration: none;
}

li a {
  text-decoration: none;
}

li a {
  text-decoration: none;
}

li a {
  text-decoration: none;
}

Xem demo

Tương thích

• IE6+
• Firefox
• Chrome
• Chrome
• Opera

10. X[title] X[title]

* {
 margin: 0;
 padding: 0;
}

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

li a {
  text-decoration: none;
}

li a {
  text-decoration: none;
}

li a {
  text-decoration: none;
}

li a {
  text-decoration: none;
}

li a {
  text-decoration: none;
}

Xem demo

Tương thích

• IE6+
• Firefox
• Chrome
• Safari
• Opera

11. X[href="foo"] X[href="foo"]

* {
 margin: 0;
 padding: 0;
}

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

li a {
  text-decoration: none;
}

li a {
  text-decoration: none;
}

li a {
  text-decoration: none;
}

li a {
  text-decoration: none;
}

li a {
  text-decoration: none;
}

4. X Y

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

li a {
  text-decoration: none;
}

Xem demo

Tương thích

• IE7+
• Firefox
• Chrome
• Safari
• Opera

12. X[href*="nettuts"] X[href*="nettuts"]

* {
 margin: 0;
 padding: 0;
}

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;
}

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

Xem demo

Tương thích

• IE7+
• Firefox
• Chrome
• Safari
• Opera

13. X[href^="http"] X[href^="http"]

* {
 margin: 0;
 padding: 0;
}

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;
}

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

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

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

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

Xem demo

Tương thích

• IE7+
• Firefox
• Chrome
• Safari
• Opera

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

* {
 margin: 0;
 padding: 0;
}

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.

Xem demo

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; }0 và div#container > ul { border: 1px solid black; }1, để tham chiếu bắt đầu và kết thúc của một chuỗi, tương ứng.

• IE7+
• Firefox
• Chrome
• Safari
• Opera

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

* {
 margin: 0;
 padding: 0;
}

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.

* {
 margin: 0;
 padding: 0;
}

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;
}

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

* {
 margin: 0;
 padding: 0;
}

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.

* {
 margin: 0;
 padding: 0;
}

Xem demo

Tương thích

• IE7+
• Firefox
• Chrome
• Safari
• Opera

16. X[foo~="bar"] X[foo~="bar"]

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

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;
}

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

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

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.

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

Đâ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

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

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

Xem demo

Tương thích

• IE7+
• Firefox
• Chrome
• Safari
• Opera

17. X:checked X:checked

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

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.

Xem demo

Tương thích

• IE7+
• Firefox
• Chrome
• Safari
• Opera

18. X:after X:after

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;
}

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

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

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

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

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

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

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

4; đ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

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

4.

Tương thích

• IE8+
• Firefox
• Chrome
• Safari
• Opera

19. X:hover X:hover

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

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à

* {
 margin: 0;
 padding: 0;
}

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

* {
 margin: 0;
 padding: 0;
}

13 đượ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

* {
 margin: 0;
 padding: 0;
}

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

Mẹo hay -

* {
 margin: 0;
 padding: 0;
}

15 trông tốt hơn so với

* {
 margin: 0;
 padding: 0;
}

16;. -

* {
 margin: 0;
 padding: 0;
}

15 trông tốt hơn so với

* {
 margin: 0;
 padding: 0;
}

16;.

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) X:not(selector)

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

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à

* {
 margin: 0;
 padding: 0;
}

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

* {
 margin: 0;
 padding: 0;
}

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

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

* {
 margin: 0;
 padding: 0;
}

Tương thích

• Mẹo hay -

  * {
   margin: 0;
   padding: 0;
  }

  15 trông tốt hơn so với

  * {
   margin: 0;
   padding: 0;
  }

  16;.
• Firefox
• Chrome
• Safari
• Opera

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à * { margin: 0; padding: 0; }12. 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! X::phần tử giả

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

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

* {
 margin: 0;
 padding: 0;
}

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

* {
 margin: 0;
 padding: 0;
}

14 vào thẻ liên kết, khi di chuyển chuột qua.

Mẹo hay -

* {
 margin: 0;
 padding: 0;
}

15 trông tốt hơn so với

* {
 margin: 0;
 padding: 0;
}

16;.

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

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

Lớp giả

* {
 margin: 0;
 padding: 0;
}

li a {
  text-decoration: none;
}

ul + p {
   color: red;
}

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;
}

Xem demo

IE9+

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

* {
 margin: 0;
 padding: 0;
}

Tương thích

• Mẹo hay -

  * {
   margin: 0;
   padding: 0;
  }

  15 trông tốt hơn so với

  * {
   margin: 0;
   padding: 0;
  }

  16;.
• Firefox
• Chrome
• Safari
• Opera

22. X:nth-child(n) X:nth-child(n)

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

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à

* {
 margin: 0;
 padding: 0;
}

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

* {
 margin: 0;
 padding: 0;
}

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

* {
 margin: 0;
 padding: 0;
}

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

* {
 margin: 0;
 padding: 0;
}

Tương thích

• Mẹo hay -

  * {
   margin: 0;
   padding: 0;
  }

  15 trông tốt hơn so với

  * {
   margin: 0;
   padding: 0;
  }

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

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

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

Opera

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à

* {
 margin: 0;
 padding: 0;
}

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

* {
 margin: 0;
 padding: 0;
}

Tương thích

• Mẹo hay -

  * {
   margin: 0;
   padding: 0;
  }

  15 trông tốt hơn so với

  * {
   margin: 0;
   padding: 0;
  }

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

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

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

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à

* {
 margin: 0;
 padding: 0;
}

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

* {
 margin: 0;
 padding: 0;
}

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

* {
 margin: 0;
 padding: 0;
}

Tương thích

• Mẹo hay -

  * {
   margin: 0;
   padding: 0;
  }

  15 trông tốt hơn so với

  * {
   margin: 0;
   padding: 0;
  }

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

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

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

Opera

Tương thích

• Mẹo hay -

  * {
   margin: 0;
   padding: 0;
  }

  15 trông tốt hơn so với

  * {
   margin: 0;
   padding: 0;
  }

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

26. X:first-child X:first-child

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

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à

* {
 margin: 0;
 padding: 0;
}

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

* {
 margin: 0;
 padding: 0;
}

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

* {
 margin: 0;
 padding: 0;
}

* {
 margin: 0;
 padding: 0;
}

Xem demo

Tương thích

• IE7+
• Firefox
• Chrome
• Safari
• Opera

27. X:last-child X:last-child

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

Ngược lại của

* {
 margin: 0;
 padding: 0;
}

* {
 margin: 0;
 padding: 0;
}

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

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

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

CSS

.error {
  color: red;
}

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

a:link { color: red; }
a:visted { color: purple; }

ul + p {
   color: red;
}

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

* {
 margin: 0;
 padding: 0;
}

14 vào từng

ul + p {
   color: red;
}

4 màu tối hơn màu nền của

ul + p {
   color: red;
}

4. Tiếp theo, áp dụng

* {
 margin: 0;
 padding: 0;
}

37 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ả

* {
 margin: 0;
 padding: 0;
}

* {
 margin: 0;
 padding: 0;
}

.error {
  color: red;
}

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

Xem demo

Tương thích

• IE7+
• Firefox
• Chrome
• Safari
• Opera

Ngược lại của

* {
 margin: 0;
 padding: 0;
}

* {
 margin: 0;
 padding: 0;
}

Ví dụ X:only-child

.error {
  color: red;
}

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

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

.error {
  color: red;
}

CSS

Xem demo

Tương thích

• IE7+
• Firefox
• Chrome
• Safari
• Opera

29. X:only-of-type X:only-of-type

.error {
  color: red;
}

Ngược lại của

* {
 margin: 0;
 padding: 0;
}

* {
 margin: 0;
 padding: 0;
}

Ví dụ

.error {
  color: red;
}

Xem demo

Tương thích

• IE7+
• Firefox
• Chrome
• Safari
• Opera

30. X:first-of-type X:first-of-type

Ngược lại của

* {
 margin: 0;
 padding: 0;
}

* {
 margin: 0;
 padding: 0;
}

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ử.

.error {
  color: red;
}

Mã đánh dấu

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

CSS

.error {
  color: red;
}

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

a:link { color: red; }
a:visted { color: purple; }

ul + p {
   color: red;
}

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

* {
 margin: 0;
 padding: 0;
}

14 vào từng

ul + p {
   color: red;
}

4 màu tối hơn màu nền của

ul + p {
   color: red;
}

4. Tiếp theo, áp dụng

* {
 margin: 0;
 padding: 0;
}

37 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ả

* {
 margin: 0;
 padding: 0;
}

* {
 margin: 0;
 padding: 0;
}

.error {
  color: red;
}

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

IE9+

À - IE8 hỗ trợ

* {
 margin: 0;
 padding: 0;
}

* {
 margin: 0;
 padding: 0;
}

.error {
  color: red;
}

28. X:only-child

Xem demo

Tương thích

• IE7+
• Firefox
• Chrome
• Safari
• Opera

Ngược lại của * { margin: 0; padding: 0; }41, * { margin: 0; padding: 0; }42 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