Css loại đầu tiên
|
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 chuyển sang các bộ lựa chọn cao cấp hơn Show
Biểu tượng ngôi sao sẽ nhắm mục tiêu 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 nhanh chóng, nhưng tôi muốn khuyên bạn đừng bao giờ sử dụng nó trong mã của sản phẩm cuối cùng. Nó thêm quá nhiều gánh nặng cho trình duyệt, và không cần thiếtDấu _____04 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 áp 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
2. #X#container {
width: 960px;
margin: auto;
}Gắn vào phía sau trước biểu tượng # chọn một bộ chọn cho phép chúng ta nhắm mục tiêu 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 cẩn trọng khi sử dụng bộ lựa chọn li a {
text-decoration: none;
}9
bộ chọn li a {
text-decoration: none;
}9 là nhắc nhở và không cho phép tái sử dụng. Nếu có thể, trước tiên hãy cố gắng sử dụng một thẻ tên, 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
3. . Xa { color: red; }
ul { margin-left: 0; }1Đây là một bộ lựa 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, hãy sử dụng li a {
text-decoration: none;
}9 để tìm một phần tử duy nhất và chỉ định cách thức cho phần tử cụ thể đóXem demo Tương thích
4. X Yli a {
text-decoration: none;
}Bộ chọn được nhắc đến nhiều nhất tiếp theo là bộ chọn a { color: red; }
ul { margin-left: 0; }1. Khi bạn cần cụ thể hơn với các bộ lựa chọn của mình, 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 nằm trong một danh sách có thứ tự?
Xem demo Tương thích
5. Xa { 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 { color: red; }
ul { margin-left: 0; }98 của họ, 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? . 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 a { color: red; }
ul { margin-left: 0; }41Xem demo Tương thích
6. X. đã truy cập và X. liên kếta { color: red; }
ul { margin-left: 0; }9Chúng ta sử dụng lớp giả mạo a { color: red; }
ul { margin-left: 0; }42 để nhắm chọn tất cả các thẻ liên kết mà vẫn chưa được nhấp vàoNgoài ra, chúng ta cũng có lớp giả mạo a { color: red; }
ul { margin-left: 0; }43, trong đó, như bạn đã thấy, hãy cho phép chúng ta áp dụng phong cách cụ thể để truy cập duy nhất các thẻ liên kết trên trang đã được nhấp vào hoặc đã truy cậpXem demo Tương thích
7. X + Ya { color: red; }
ul { margin-left: 0; }4This is call is a next next set. Nó sẽ chỉ chọn các phần tử 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 a { color: red; }
ul { margin-left: 0; }44 sẽ có chữ màu đỏXem demo Tương thích
8. X > Y#container * {
border: 1px solid black;
}0Sự khác biệt giữa a { color: red; }
ul { margin-left: 0; }45 tiêu chuẩn và a { color: red; }
ul { margin-left: 0; }46 đó là cái sau sẽ chỉ chọn phần tử con trực tiếp. Ví dụ, hãy xem đánh giá đánh dấu sau#container * {
border: 1px solid black;
}3Một bộ lựa chọn của a { color: red; }
ul { margin-left: 0; }47 sẽ chỉ nhắm vào các lựa chọn của a { color: red; }
ul { margin-left: 0; }44 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à #container * {
border: 1px solid black;
}01. Nó sẽ không nhắm mục tiêu lựa chọn, ví dụ, a { color: red; }
ul { margin-left: 0; }44 mà là con của #container * {
border: 1px solid black;
}03 đầu tiênVì lý do này, có những lợi ích về hiệu năng trong việc sử dụng các kết hợp. Trong thực tế, nó được khuyến khích 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
9. X ~ Y#container * {
border: 1px solid black;
}0Sự kết hợp của anh chị em này tương tự như #container * {
border: 1px solid black;
}04, tuy nhiên, nó ít nghiêm trọng hơn. Trong khi bộ chọn liền kề (#container * {
border: 1px solid black;
}05) sẽ chỉ chọn phần tử đầu tiên ngay sau đó, thì cái này là tổng thể hơn. Nó sẽ chọn, lấy ví dụ trên, bất kỳ phần tử #container * {
border: 1px solid black;
}06 nào, miễn phí là chúng theo sau một a { color: red; }
ul { margin-left: 0; }44Xem demo Tương thích
10. X[title]#container * {
border: 1px solid black;
}1Được xem là một bộ tùy 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 #container * {
border: 1px solid black;
}08. Các thẻ liên kết không có sẽ không nhận được 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
11. X[href="foo"]#container * {
border: 1px solid black;
}2Đoạn mã ở trên sẽ định cách cho tất cả các thẻ liên kết đến https. //bọc lưới. tutplus. com; . Tất cả các thẻ liên kết khác nhau sẽ không bị ảnh hưởng
Tuy nhiên, điều này hoạt động tốt, hơi khó 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 đủ? Xem demo Tương thích
12. X[href*="nettuts"]#container * {
border: 1px solid black;
}3You see rồi đó; . 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, mạng. tutplus. com, and even chí tutsplus. com Hãy nhớ rằng đây là một bộ lựa chọn rộng. Điều gì xảy ra nếu thẻ liên kết kết nối đến một số trang web không phải Envato với chuỗi tuts trong url? Xem demo Tương thích
13. X[href^="http"]#container * {
border: 1px solid black;
}4Có 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? Đây là một biểu thức với biểu tượng dấu phụ. 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 #container * {
border: 1px solid black;
}31 bắt đầu bằng #container * {
border: 1px solid black;
}32, chúng ta có thể sử dụng một bộ chọn tương tự như mã đoạn trên
Bây giờ, nếu chúng ta muốn thay đổi 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ỉ? Xem demo Tương thích
14. X[href$=". jpg"]#container * {
border: 1px solid black;
}5Mộ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, #container * {
border: 1px solid black;
}30, để tham chiếu đến phần cuối của một chuỗi. Trong trường hợp này, chúng tôi đ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 #container * {
border: 1px solid black;
}36. Hãy nhớ rằng điều này chắc chắn sẽ không có tác dụng với #container * {
border: 1px solid black;
}37 và #container * {
border: 1px solid black;
}38Xem demo khả năng tương thích
15. X[data-*="foo"]#container * {
border: 1px solid black;
}6Xem lại tám tám phần; . #container * {
border: 1px solid black;
}38, #container * {
border: 1px solid black;
}00, #container * {
border: 1px solid black;
}01, #container * {
border: 1px solid black;
}37? #container * {
border: 1px solid black;
}7Như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;
}8Sau đó, với cái móc đó, chúng ta có thể sử dụng một bộ lựa 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;
}6Xem demo Tương thích
16. X[foo~="bar"]#container {
width: 960px;
margin: auto;
}0Dưới đây là một điều đặc biệt 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. Các biểu tượng #container * {
border: 1px solid black;
}04 cho phép chúng ta nhắm mục tiêu 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ắngCùng với các tùy chỉnh thuộc tí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 theo khoảng trống của bất cứ thứ gì chúng ta cần lưu ý. . Trong trường hợp này, chúng ta sẽ chú ý đế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;
}1Với các mã đánh dấu đã có, bây giờ chúng ta có thể nhắm mục tiêu chọn bất kỳ thẻ nào có một trong các giá trị đó, bằng cách sử dụng bộ tùy chọn thuộc tính ~ #container {
width: 960px;
margin: auto;
}2Khá tiện lợi phải không? Xem demo Tương thích
17. X. đã chọn#container {
width: 960px;
margin: auto;
}3Lớp giả này sẽ chỉ nhắm mục tiêu chọn một phần tử giao diện người dùng đã được đánh giá - same as a node radio, or checkbox. Nó chỉ đơn giản như vậy Xem demo Tương thích
18. X. sauCác lớp giả mạo #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ọnNhiều người lần đầu tiên biết được các lớp này khi họ gặp vấn đề về Clear-Fix #container {
width: 960px;
margin: auto;
}4Cách giải quyết này sử dụng lớp giả mạo #container * {
border: 1px solid black;
}08 để kết nối thêm một khoảng phía trước phía sau phần tử, và sau đó xóa 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 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 đổ
Tương thích
19. X. di chuột#container {
width: 960px;
margin: auto;
}5Thôi nào. You know this one. Thuật ngữ chính thức cho công 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 cách thức cụ thể khi người dùng di chuyển chuột qua một phần tử phải không?
Bạn sẽ thường xuyên sử dụng bộ lựa 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
Tương thích
20. X. không (bộ chọn)#container {
width: 960px;
margin: auto;
}7Lớ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à #container * {
border: 1px solid black;
}01. Đoạn mã trên sẽ xử lý nhiệm vụ đó một cách hoàn hảoHoặc, nếu tôi muốn chọn tất cả các phần tử (không nên), ngoại trừ các thẻ cho đoạn văn, chúng tôi có thể làm #container {
width: 960px;
margin: auto;
}8Xem demo Tương thích
21. X. fake section#container {
width: 960px;
margin: auto;
}9Chúng ta có thể sử dụng các phần tử giả (được chỉ định bởi #container * {
border: 1px solid black;
}10) để xác định cách thức 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 điều này phải được áp dụng vào các phần tử cấp độ khối để đạt được hiệu quả
Imm select the first character of the text sectiona { color: red; }
ul { margin-left: 0; }10Đoạn mã này là một minh họa 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òng đầu tiên của đoạn văn#container {
width: 960px;
margin: auto;
}9Tươ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ử
Xem demo Tương thích
22. X. con thứ n(n)a { color: red; }
ul { margin-left: 0; }12Còn nhớ những ngày mà chúng ta không có cách nào để chọn các phần cụ thể trong một ngăn xếp không? 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 chỉ làm số đầu tiên. Nếu bạn muốn chọn hai phần tử danh sách, hãy sử dụng #container * {
border: 1px solid black;
}24Chú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 cách sau mỗi bốn phần trong danh sáchXem demo Tương thích
23. X. con thứ n(n)a { color: red; }
ul { margin-left: 0; }13Đ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 a { color: red; }
ul { margin-left: 0; }44 và chỉ cần truy cập, ví dụ phần tử thứ ba đến phần tử cuối cùng? 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 tập hợp và quay ngược trở lại Xem demo Tương thích
24. X. loại thứ n(n)a { color: red; }
ul { margin-left: 0; }14Sẽ 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 { color: red; }
ul { margin-left: 0; }98 của phần tửHãy tưởng tượng đánh dấu đánh dấu bao gồm năm danh sách không có thứ tự. Nếu bạn muốn chỉ định cách cho a { color: red; }
ul { margin-left: 0; }44 thứ ba và không có li a {
text-decoration: none;
}9 để lựa chọn, bạn có thể sử dụng các lớp giả mạo #container * {
border: 1px solid black;
}33. Trong đoạn mã ở trên, chỉ có a { color: red; }
ul { margin-left: 0; }44 thứ ba sẽ có một đường viền xung quanh nóXem demo Tương thích
25. X. nth-last-of-type(n)a { color: red; }
ul { margin-left: 0; }15Vâng, để hệ thống tốt 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à quay ngược lại một lần để chọn phần tử mong muốnTương thích
26. X. đứa con đầu lònga { color: red; }
ul { margin-left: 0; }16Lớ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 xuyên sử dụng điều này để loại bỏ đường viền khỏi phần tử đầu tiên và phần 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 đầu tiên và phần cuối cùng trong tập hợp sẽ trông hơi khácNhiề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 công việc này. Thay vào đó, bạn có thể sử dụng các lớp giả nàyXem demo Tương thích
27. X. đứa con cuối cùnga { color: red; }
ul { margin-left: 0; }17Ngược lại của _______ 340, _______ 341 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ạ 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ử Đánh dấua { color: red; }
ul { margin-left: 0; }18Không có gì đặc biệt ở đây; CSSa { color: red; }
ul { margin-left: 0; }19Phong cách này sẽ thiết lập nền, loại bỏ phần đệm mặc định của trình duyệt trên a { color: red; }
ul { margin-left: 0; }44 và áp dụng đường viền vào từng #container * {
border: 1px solid black;
}03 để tăng thêm một chút chiều sâu
Vấn đề duy nhất, như thể hiện trong hình trên, là một đường viền sẽ không được áp dụng cho các 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. Vui lòng sử dụng các lớp giả mạo #container * {
border: 1px solid black;
}48 và #container * {
border: 1px solid black;
}49 để giải quyết vấn đề nàyli a {
text-decoration: none;
}0You found that; Xem demo Tương thích
À - IE8 hỗ trợ #container * {
border: 1px solid black;
}48, nhưng không hỗ trợ #container * {
border: 1px solid black;
}49. Hãy tìm cách giải quyết28. X. con mộtli a {
text-decoration: none;
}1Thà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 mã ở 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 đỏThe after sign code li a {
text-decoration: none;
}2Trong 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; . 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ả mạo #container * {
border: 1px solid black;
}52 không còn hiệu lựcXem demo Tương thích
29. X. loại duy nhấtli a {
text-decoration: none;
}3Lớ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 { color: red; }
ul { margin-left: 0; }44, 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? . Giải pháp duy nhất để sử dụng là #container * {
border: 1px solid black;
}59li a {
text-decoration: none;
}4Xem demo Tương thích
30. X. hạng nhấtLớ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 một kiểuthử 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 các đánh dấu sau vào mã soạn thảo mã của bạn li a {
text-decoration: none;
}5Bây giờ, không đọc thêm nữa, cố gắng tìm cách chỉ chọn "Mục danh sách 2". Khi bạn đã tìm ra cách (hoặc bỏ cuộc), hãy đọc tiếp Giải pháp 1Có nhiều cách khác nhau để giải bài kiểm tra này. Chúng ta sẽ xem xét một số ít trong số chúng. Please start by way using #container * {
border: 1px solid black;
}60li a {
text-decoration: none;
}6Đoạn chủ đề 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 2Một lựa chọn khác là sử dụng bộ lựa chọn liền kề li a {
text-decoration: none;
}7Trong trường hợp này, chúng ta tìm thấy a { color: red; }
ul { margin-left: 0; }44 ngay trước thẻ #container * {
border: 1px solid black;
}06, và sau đó tìm thấy phần cuối cùng của phần tửGiải pháp 3Chúng ta có thể làm cho phức tạp hoặc đơn giản tùy ý chúng ta muốn với các bộ chọn li a {
text-decoration: none;
}8Lần này, chúng ta lấy a { color: red; }
ul { margin-left: 0; }44 đầ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ừ bên dưới. . )Xem demo Tương thích
Tổng kếtNếu bạn đang hỗ trợ 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 công việc học tập 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 các trình duyệt tương thích. Ngoài ra, bạn có thể sử dụng tập lệnh IE9. js của Dean Edward để hỗ trợ mang lại các bộ chọn trong 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 các bộ CSS3 gốc được chọn thay vì các phương thức/bộ chọn của các thư viện tùy biến, khi có thể. Nó sẽ làm cho mã của bạn nhanh hơn, vì cơ chế lựa 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ì riêng của nó |
