5 từ có chữ cái ul ở giữa năm 2022
|
Như vậy, bạn đã học được các bộ chọn cơ bản Show
1. ** {
margin: 0;
padding: 0;
}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ỏ Dấu #container * {
border: 1px solid black;
}Điều này sẽ chọn mọi phần tử mà là con của Xem demo Tương thích
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
bộ chọn Xem demo Tương thích
3. .X.error {
color: red;
}Đây là một bộ chọn 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à chọn
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 Xem demo Tương thích
6. X:visited và X:linka:link { color: red; }
a:visted { color: purple; }Chúng ta sử dụng lớp giả Ngoài ra, chúng ta cũng có
lớp giả Xem demo Tương thích
7. X + Yul + 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 Xem demo Tương thích
8. X > Ydiv#container > ul {
border: 1px solid black;
}Sự khác biệt giữa
Một bộ chọn của 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
9. X ~ Yul ~ p {
color: red;
}Sự kết hợp anh chị em này là tương tự như Xem demo Tương thích
10. X[title]a[title] {
color: green;
}Đượ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 Xem demo Tương thích
11. X[href="foo"]a[href="https://net.tutsplus.com"] {
color: #1f6053; /* nettuts green */
}Đ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.
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
12. X[href*="nettuts"]a[href*="tuts"] {
color: #1f6053; /* nettuts green */
}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 Xem demo Tương thích
13. X[href^="http"]a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}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
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
14. X[href$=".jpg"]a[href$=".jpg"] {
color: red;
}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, Xem demo Compatibility
15. X[data-*="foo"]a[data-filetype="image"] {
color: red;
}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: a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
color: red;
}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 Image Link 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 đó. a[data-filetype="image"] {
color: red;
}Xem demo Tương thích
16. X[foo~="bar"] a[data-info~="external"] {
color: red;
}
a[data-info~="image"] {
border: 1px solid black;
}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 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 " Click Me, Fool 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 ~. /* Target data-info attr that contains the value "external" */
a[data-info~="external"] {
color: red;
}
/* And which contain the value "image" */
a[data-info~="image"] {
border: 1px solid black;
}Khá tiện lợi, phải không? Xem demo Tương thích
17. X:checkedinput[type=radio]:checked {
border: 1px solid black;
}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
18. X:afterCác lớp giả 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. .clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
.clearfix {
*display: inline-block;
_height: 1%;
}Cách giải quyết này sử dụng lớp giả Đố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:hoverdiv:hover {
background: #e3e3e3;
}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à
Bạn sẽ thường xuyên sử dụng bộ chọn này khi áp dụng, ví dụ, một a:hover {
border-bottom: 1px solid black;
}
Tương thích
20. X:not(selector)div:not(#container) {
color: blue;
}Lớp giả 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: *:not(p) {
color: green;
}Xem demo Tương thích
21. X::phần tử giảp::first-line {
font-weight: bold;
font-size: 1.2em;
}Chúng ta có thể sử dụng các phần tử giả (được chỉ định bởi
Nhắm chọn ký tự đầu tiên của đoạn vănp::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right: 2px;
}Đ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ănp::first-line {
font-weight: bold;
font-size: 1.2em;
}Tương tự như
vậy, phần tử giả
Xem demo Tương thích
22. X:nth-child(n)li:nth-child(3) {
color: red;
}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ả Tuy nhiên, xin lưu ý rằng 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 Xem demo Tương thích
23. X:nth-last-child(n)li:nth-last-child(2) {
color: red;
}Đ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 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
24. X:nth-of-type(n)ul:nth-of-type(3) {
border: 1px solid black;
}Sẽ có lúc, thay vì chọn
mộ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 Xem demo Tương thích
25. X:nth-last-of-type(n)ul:nth-last-of-type(3) {
border: 1px solid black;
}Và vâng, để thống nhất, chúng ta cũng có thể sử dụng Tương thích
26. X:first-childul li:first-child {
border-top: none;
}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ó Nhiều nhà thiết kế áp dụng các lớp Xem demo Tương thích
27. X:last-childul > li:last-child {
color: green;
}Ngược lại của 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
Không có gì đặc biệt ở đây; chỉ là một danh sách đơn giản. CSSul {
width: 200px;
background: #292929;
color: white;
list-style: none;
padding-left: 0;
}
li {
padding: 10px;
border-bottom: 1px solid black;
border-top: 1px solid #3c3c3c;
}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 
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ả li:first-child {
border-top: none;
}
li:last-child {
border-bottom: none;
}Bạn thấy đó; điều này đã khắc phục được nó! Xem demo Tương thích
À - IE8 hỗ trợ 28. X:only-childdiv p:only-child {
color: red;
}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ả 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 Giả sử mã dấu sau.
Trong trường hợp này, đoạn văn của Xem demo Tương thích
29. X:only-of-typeli:only-of-type {
font-weight: bold;
}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ả Đầ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 ul > li:only-of-type {
font-weight: bold;
}Xem demo Tương thích
30. X:first-of-typeLớp giả 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:
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 1Có 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 ul:first-of-type > li:nth-child(2) {
font-weight: bold;
}Đ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 2Một lựa chọn khác là sử dụng bộ chọn liền kề. p + ul li:last-child {
font-weight: bold;
}Trong trường hợp này, chúng ta tìm thấy Giải pháp 3Chú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. ul:first-of-type li:nth-last-child(1) {
font-weight: bold;
}Lần này, chúng ta lấy Xem demo Tương thích
Tổng kếtNế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ó. Cảm ơn bạn đã theo dõi, và tôi hy vọng bạn đã học được một vài thủ thuật có ích! |
