CSS là một trong những công cụ mạnh nhất có sẵn cho các nhà thiết kế web [nếu không muốn nói là mạnh nhất]. Với nó, chúng tôi hoàn toàn có thể biến đổi giao diện của một trang web chỉ trong vài phút – thậm chí không cần phải chạm vào đánh dấu. Nhưng mặc dù chúng ta đều nhận thức rõ về tính hữu ích của nó, các selectors CSS vẫn chưa được sử dụng hết tiềm năng của chúng và đôi khi chúng ta có xu hướng rải rác HTML của mình với các class và id, div và element thừa và không cần thiết.
Các bài viết liên quan:
Cách tốt nhất để tránh những lỗi này trong CSS của bạn và giữ cho nó sạch sẽ và có ngữ nghĩa, là sử dụng các CSS selector phức tạp hơn, những selection có thể nhắm mục tiêu các phần tử cụ thể mà không cần lớp hoặc id và bằng cách làm đó giữ cho code của chúng ta và bảng định kiểu của chúng ta linh hoạt.
Đặc tính CSS #
Trước khi đi sâu vào lĩnh vực của các selectors CSS nâng cao, điều quan trọng là phải hiểu cách thức hoạt động của tính cụ thể CSS, để chúng tôi biết cách sử dụng đúng các selectors của mình và tránh mất hàng giờ để gỡ lỗi cho một vấn đề CSS có thể dễ dàng khắc phục nếu chúng tôi chỉ phải trả tiền chú ý đến tính cụ thể.
Khi viết CSS, chúng ta phải lưu ý rằng một số selectors sẽ xếp hạng cao hơn những selectors khác trong flow, selectors mới nhất mà chúng tôi đã viết sẽ không phải lúc nào cũng ghi đè các selectors trước đó mà chúng tôi đã viết cho các phần tử giống nhau.
Vì vậy, làm thế nào để bạn tính toán cụ thể của một selectors cụ thể? Khá đơn giản nếu bạn tính đến tính cụ thể đó sẽ được biểu thị dưới dạng bốn số được phân tách bằng dấu phẩy, như: 1, 1, 1, 1 hoặc 0, 2, 0, 1
- Chữ số đầu tiên [a] luôn bằng 0, trừ khi có một attributes style được áp dụng cho phần tử đó trong chính phần đánh dấu
- Chữ số thứ hai [b] là tổng số ID trong selectors đó
- Chữ số thứ ba © là tổng của các selectors attributes khác và các lớp giả trong selectors đó. Các lớp [.example] và selectors attributes [ví dụ: li [id = red]] được bao gồm ở đây.
- Chữ số thứ tư [d] đếm các phần tử [như bảng, p, div, v.v.] và các phần tử giả [như: dòng đầu tiên]
- selectors phổ quát [*] có độ đặc hiệu bằng 0
- Nếu hai selectors có cùng tính cụ thể, selectors đứng cuối cùng trên biểu định kiểu sẽ được áp dụng
Hãy xem một vài ví dụ để dễ hiểu hơn:
#sidebar h2 — 0, 1, 0, 1 h2.title — 0, 0, 1, 1 h2 + p — 0, 0, 0, 2 #sidebar p:first-line — 0, 1, 0, 2
Từ các selectors sau, selectors đầu tiên là selectors sẽ được áp dụng cho phần tử, vì nó có độ đặc hiệu cao hơn:
#sidebar p#first { color: red; } — 0, 2, 0, 1 #sidebar p:first-line { color: blue; } — 0, 1, 0, 2
Điều quan trọng là bạn phải có ít nhất hiểu biết cơ bản về cách hoạt động của tính cụ thể, nhưng các công cụ như Firebug rất hữu ích để cho chúng tôi biết selectors nào đang được áp dụng cho một phần tử cụ thể bằng cách liệt kê tất cả các selectors CSS theo thứ tự tính cụ thể của chúng khi bạn đang kiểm tra một phần tử .
Firebug cho phép bạn dễ dàng xem selectors nào đang được áp dụng cho một phần tử.
Selectors attributes #
selectors attributes cho phép bạn nhắm mục tiêu một phần tử dựa trên các attributes của nó. Bạn chỉ có thể chỉ định attributes của phần tử, vì vậy tất cả các phần tử có attributes đó – bất kể value nào – trong HTML sẽ được nhắm mục tiêu hoặc cụ thể hơn và nhắm mục tiêu các phần tử có value cụ thể trên attributes của chúng – và đây là nơi selectors attributes hiển thị sức mạnh của họ.
Có 6 loại selectors attributes khác nhau:
attributes phải có value chính xác được chỉ định.
value của attributes cần phải là một danh sách các từ được phân tách bằng khoảng trắng [ví dụ: class = “title feature home”] và một trong các từ là chính xác value được chỉ định.
value của attributes chính xác là “value” hoặc bắt đầu bằng từ “value” và ngay sau đó là “-”, vì vậy nó sẽ là “value-”.
value của attributes bắt đầu bằng value được chỉ định.
value của attributes kết thúc bằng value được chỉ định.
value của attributes chứa value được chỉ định.
Ví dụ: nếu bạn muốn thay đổi màu nền của tất cả các phần tử div là bài đăng trên blog của mình, bạn có thể sử dụng công cụ chọn attributes nhắm mục tiêu mọi div có attributes class chứa class “post”:
div[class*="post"] { background-color: #333; }
Một cách sử dụng hữu ích khác của selectors attributes là nhắm mục tiêu các loại phần tử input khác nhau. Ví dụ: nếu bạn muốn đầu vào văn bản của mình có chiều rộng khác với các đầu vào khác, bạn có thể sử dụng công cụ chọn attributes đơn giản:
input[type="text"] { width: 200px; }
Điều này sẽ nhắm mục tiêu tất cả các phần tử đầu vào có attributes kiểu chính xác là “text”.
Bây giờ, giả sử bạn muốn thêm một biểu tượng khác bên cạnh mỗi loại tệp khác nhau mà trang web của bạn đang liên kết đến để khách truy cập trang web của bạn biết khi nào họ sẽ nhận được hình ảnh, tệp PDF, tài liệu Word, v.v. Điều này có thể được thực hiện bằng cách sử dụng công cụ chọn attributes:
a[href$=".jpg"] { background: url[jpeg.gif] no-repeat left 50%; padding: 2px 0 2px 20px; } a[href$=".pdf"] { background: url[pdf.gif] no-repeat left 50%; padding: 2px 0 2px 20px; } a[href$=".doc"] { background: url[word.gif] no-repeat left 50%; padding: 2px 0 2px 20px; }
Trong ví dụ này, chúng tôi đã sử dụng công cụ chọn attributes sẽ nhắm mục tiêu tất cả các liên kết [a] có attributes href kết thúc [$] bằng .jpg, .pdf hoặc .doc.
Lưu ý về hỗ trợ trình duyệt Ngoài Internet Explorer 6, tất cả các trình duyệt chính đều hỗ trợ selectors attributes. Điều này có nghĩa là khi bạn đang sử dụng selectors attributes trên bảng định kiểu của mình, bạn nên đảm bảo rằng người dùng IE6 sẽ vẫn được cung cấp một trang web có thể sử dụng được. Lấy ví dụ thứ ba của chúng tôi: thêm một biểu tượng vào các liên kết của bạn sẽ thêm một cấp độ khả dụng khác cho trang web của bạn, nhưng trang web sẽ vẫn có thể sử dụng được nếu các liên kết không hiển thị bất kỳ biểu tượng nào.
Selectors Child #
Selectors child được biểu thị bằng dấu “>”. Nó cho phép bạn nhắm mục tiêu các phần tử là con trực tiếp của một phần tử cụ thể.
Ví dụ: nếu bạn muốn so khớp tất cả các phần tử h2 là phần tử con trực tiếp của div thanh bên của bạn, nhưng không phải các phần tử h2 cũng có thể nằm trong div, nhưng đó là cháu [hoặc con cháu sau này] của phần tử của bạn, bạn có thể sử dụng selectors này:
div#sidebar > h2 { font-size: 20px; }
Bạn cũng có thể sử dụng kết hợp cả selectors child và child Ví dụ: nếu bạn chỉ muốn nhắm mục tiêu các phần tử blockquote nằm trong div là cháu trực tiếp của phần tử body [bạn có thể muốn khớp các blockquote bên trong div nội dung chính, nhưng không phải nếu chúng nằm bên ngoài nó]:
body > div > div blockquote { margin-left: 30px; }
Lưu ý về hỗ trợ trình duyệt Giống như selectors attributes, selectors con không được hỗ trợ bởi Internet Explorer 6. Nếu hiệu quả bạn đang cố gắng đạt được bằng cách sử dụng nó là rất quan trọng đối với khả năng sử dụng hoặc tính thẩm mỹ tổng thể của trang web, bạn có thể cân nhắc sử dụng selectors lớp với nó hoặc trên biểu định kiểu chỉ dành cho IE, nhưng điều đó sẽ làm giảm mục đích sử dụng selectors con.
Seclectors kết hợp#
Có hai loại tổ hợp anh em: tổ hợp anh chị em phụ thuộc và tổ hợp anh em chung.
Selectors này sử dụng dấu cộng, “+”, để kết hợp hai chuỗi selectors đơn giản. Các phần tử trong selectors có cùng một phần tử gốc và phần tử thứ hai phải đến ngay sau phần tử đầu tiên.
Ví dụ, bộ tổ hợp anh chị em kế cận có thể rất hữu ích khi xử lý văn bản. Giả sử bạn muốn thêm lề trên cho tất cả các thẻ h2 theo sau một đoạn văn [bạn không cần thêm lề trên nếu tiêu đề đứng sau thẻ h1 hoặc nếu đó là phần tử đầu tiên trên trang đó]:
p + h2 { margin-top: 10px; }
Bạn có thể cụ thể hơn nữa và nói rằng bạn chỉ muốn áp dụng quy tắc này nếu các phần tử nằm trong một div cụ thể:
div.post p + h2 { margin-top: 10px; }
Hoặc bạn có thể thêm một mức độ phức tạp khác: giả sử bạn muốn dòng đầu tiên của các đoạn văn của mỗi trang được viết hoa nhỏ.
.post h1 + p:first-line { font-variant: small-caps; }
Vì bạn biết rằng đoạn đầu tiên của mỗi bài đăng ngay sau thẻ h1, bạn có thể tham chiếu đến h1 trên selectors của mình.
Selectors kết hợp chung #
Bộ tổ hợp anh chị em chung hoạt động khá giống với bộ tổ hợp anh chị em liền kề, nhưng với sự khác biệt là selectors thứ hai không phải ngay sau selectors đầu tiên.
Vì vậy, nếu bạn cần nhắm mục tiêu tất cả các thẻ p nằm trong một div cụ thể và theo sau thẻ h1 [bạn có thể muốn những thẻ p đó lớn hơn những thẻ đứng trước tiêu đề bài đăng của bạn], bạn có thể sử dụng selectors này :
.post h1 ~ p { font-size: 13px; }
Lưu ý về hỗ trợ trình duyệt, Internet Explorer 6 không hiểu các tổ hợp anh chị em, nhưng đối với các trường hợp khác, nếu đối tượng của bạn bao gồm một tỷ lệ nhỏ người dùng IE6 và nếu bố cục của trang web không bị hỏng hoặc bị ảnh hưởng nghiêm trọng do thiếu hỗ trợ , đây là một cách dễ dàng hơn nhiều để đạt được nhiều hiệu ứng tuyệt vời mà không cần phải làm lộn xộn HTML của bạn với các lớp và id vô dụng.
Selectors Pseudo-Classes
DYNAMIC PSEUDO-CLASSES
Chúng được gọi là các Pseudo-classes động vì chúng thực sự không tồn tại trong HTML: chúng chỉ hiện diện khi người dùng đã hoặc đang tương tác với trang web.
Có hai loại pseudo-classes: link và user action của người dùng. Liên kết là :link và: visit, trong khi các hành động của người dùng là: hover,: active và: forcus.
Từ tất cả các selectors CSS được đề cập trong bài đăng này, đây có thể là những selectors được sử dụng phổ biến nhất.
Pseudo-classes:link áp dụng cho các liên kết chưa được người dùng truy cập, trong khi lớp giả: đã truy cập áp dụng cho các liên kết đã được truy cập, vì vậy chúng loại trừ lẫn nhau.
Pseudo-classes: hover áp dụng khi người dùng di chuyển con trỏ qua phần tử mà không cần phải kích hoạt hoặc nhấp vào phần tử đó. Pseudo-classes: active áp dụng khi người dùng thực sự nhấp vào phần tử. Và cuối cùng là:focus áp dụng khi phần tử đó nằm trong tiêu điểm – ứng dụng phổ biến nhất là trên các phần tử form.
Bạn có thể sử dụng nhiều hơn một Pseudo-classes động hành động của người dùng trong các biểu định kiểu của mình, vì vậy, bạn có thể có, ví dụ: màu nền khác cho trường nhập liệu tùy thuộc vào việc con trỏ của người dùng chỉ di chuột qua nó hay di chuột qua nó khi đang lấy nét :
input:focus { background: #D2D2D2; border: 1px solid #5E5E5E; } input:focus:hover { background: #C7C7C7; }
Lưu ý về hỗ trợ trình duyệt Các động được hỗ trợ bởi tất cả các trình duyệt hiện đại, ngay cả IE6. Nhưng hãy nhớ rằng IE6 chỉ cho phép áp dụng: hover pseudo-class cho các phần tử liên kết [a] và chỉ IE8 chấp nhận trạng thái: hoạt động trên các phần tử không phải là liên kết.
::FIRST-CHILD
Pseudo-classes : first-child cho phép bạn nhắm mục tiêu một phần tử là phần tử con đầu tiên của một phần tử khác. Ví dụ: nếu bạn muốn thêm một lề trên vào phần tử li đầu tiên của danh sách không có thứ tự của mình, bạn có thể có:
ul > li:first-child { margin-top: 10px; }
Hãy lấy một ví dụ khác: bạn muốn tất cả các thẻ h2 trong thanh bên của mình có lề trên cùng, để tách chúng khỏi bất kỳ thứ gì đứng trước chúng, nhưng thẻ đầu tiên không cần lề. Bạn có thể sử dụng mã sau:
#sidebar > h2 { margin-top: 10px; } #sidebar > h2:first-child { margin-top: 0; }
Ghi chú về hỗ trợ trình duyệt IE6 không hỗ trợ: first-child. Tùy thuộc vào thiết kế mà lớp giả đang được áp dụng, nó có thể không phải là nguyên nhân chính đáng lo ngại. Ví dụ: nếu bạn đang sử dụng: first-child selector để xóa các lề trên hoặc dưới khỏi các tiêu đề hoặc đoạn văn, bố cục của bạn có thể sẽ không bị vỡ trong IE6, nó sẽ chỉ trông khác lạ. Nhưng nếu bạn đang sử dụng: first-child selector để xóa các lề trái và lề phải, ví dụ, một chuỗi div nổi, điều này có thể gây ra nhiều gián đoạn hơn cho thiết kế của bạn.
LANGUAGE PSEUDO-CLASS #
Pseudo-class language,: lang [], cho phép bạn so khớp một phần tử dựa trên ngôn ngữ của nó.
Ví dụ: giả sử bạn muốn một liên kết cụ thể trên trang web của mình có màu nền khác, tùy thuộc vào ngôn ngữ của trang đó:
:lang[en] > a#flag { background-image: url[english.gif]; } :lang[fr] > a#flag { background-image: url[french.gif]; }
Các selectors sẽ khớp với liên kết cụ thể đó nếu ngôn ngữ của trang bằng “en” hoặc “fr” hoặc nếu nó bắt đầu bằng “en” hoặc “fr” và ngay sau đó là “-”.
Lưu ý khi hỗ trợ trình duyệt Không có gì ngạc nhiên khi phiên bản Internet Explorer duy nhất hỗ trợ selectors này là 8. Tất cả các trình duyệt chính khác đều hỗ trợ selectors giả ngôn ngữ.
CSS 3 Pseudo-Classes :TARGET
Khi bạn đang sử dụng các liên kết có số nhận dạng phân đoạn #comments, trong đó “#comments” là phân đoạn định danh], bạn có thể tạo kiểu cho mục tiêu bằng cách sử dụng: target pseudo-class.
Ví dụ: hãy tưởng tượng bạn có một trang dài với nhiều văn bản và tiêu đề h2, và có một chỉ mục của những tiêu đề đó ở đầu trang. Người dùng sẽ dễ dàng hơn nhiều nếu, khi nhấp vào một liên kết cụ thể trong chỉ mục, tiêu đề đó sẽ được đánh dấu theo một cách nào đó, khi trang cuộn xuống. Dễ:
h2:target { background: #F2EBD6; }
Lưu ý khi hỗ trợ trình duyệt Lần này, Internet Explorer thực sự khó chịu và không hỗ trợ gì cho: target pseudo-class. Một trục trặc khác là Opera không hỗ trợ selectors này khi sử dụng các nút quay lại và chuyển tiếp. Ngoài ra, nó có hỗ trợ từ các trình duyệt chính khác.
Element states PSEUDO-CLASSES
Một số phần tử HTML có trạng thái enable hoặc tắt [ví dụ: trường nhập] và trạng thái được chọn hoặc không được checked [nút radio và hộp kiểm]. Các trạng thái này có thể được nhắm mục tiêu theo các Pseudo-class tương ứng:checked ,: đã disable hoặc: checked.
Vì vậy, bạn có thể nói rằng bất kỳ đầu vào nào bị vô hiệu hóa phải có nền màu xám nhạt và đường viền chấm:
input:disabled { border:1px dotted #999; background:#F2F2F2; }
Bạn cũng có thể nói rằng tất cả các hộp kiểm được chọn phải có bên trái margin [có thể dễ dàng nhìn thấy trong một danh sách dài các checkbox]:
input[type="checkbox"]:checked { margin-left: 15px; }
Lưu ý về hỗ trợ trình duyệt Tất cả các trình duyệt chính, ngoại trừ nghi ngờ thông thường của chúng tôi, Internet Explorer, hỗ trợ phần tử giao diện người dùng trạng thái Pseudo-class. Nếu bạn cho rằng bạn chỉ đang thêm một mức độ chi tiết bổ sung và cải thiện khả năng sử dụng cho khách truy cập của mình, thì đây vẫn có thể là một lựa chọn.
Pseudo-class cấu trúc CSS 3 : NTH-CHILD#
Pseudo-class: nth-child [] cho phép bạn nhắm mục tiêu một hoặc nhiều phần tử con cụ thể của phần tử cha.
Bạn có thể nhắm mục tiêu một phần tử con, bằng cách xác định value của nó dưới dạng số nguyên:
ul li:nth-child[3] { color: red; }
Thao tác này sẽ chuyển văn bản trên mục li 3 trong phần tử ul thành màu đỏ. Hãy nhớ rằng nếu một phần tử khác nằm bên trong ul [không phải là li], nó cũng sẽ được tính là con của nó.
Bạn có thể nhắm mục tiêu con cái của cha mẹ bằng cách sử dụng các biểu thức. Ví dụ: biểu thức sau sẽ khớp với mọi phần tử li thứ ba bắt đầu từ phần tử thứ tư:
ul li:nth-child[3n+4] { color: yellow; }
Trong trường hợp trước, phần tử li màu vàng đầu tiên sẽ là phần tử thứ tư. Nếu bạn chỉ muốn bắt đầu đếm từ phần tử li đầu tiên, bạn có thể sử dụng một biểu thức đơn giản hơn:
ul li:nth-child[3n] { color: yellow; }
Trong trường hợp này, phần tử li màu vàng đầu tiên sẽ là phần tử thứ ba và mọi phần tử thứ ba khác sau nó. Bây giờ, hãy tưởng tượng bạn chỉ muốn nhắm mục tiêu bốn phần tử li đầu tiên trong danh sách:
ul li:nth-child[-n+4] { color: green; }
value của: n-child cũng có thể được định nghĩa là “chẵn” hoặc “lẻ”, giống như cách sử dụng “2n” [mọi con thứ hai] hoặc “2n + 1” [mọi con thứ hai bắt đầu từ con thứ nhất], tương ứng.
: NTH-LAST-CHILD
Pseudo-class: nth-last-child về cơ bản hoạt động như một Pseudo-class: nth-child, nhưng nó bắt đầu đếm các phần tử từ lớp cuối cùng.
Sử dụng một trong các ví dụ trên:
ul li:nth-child[-n+4] { color: green; }
Thay vì khớp với bốn phần tử li đầu tiên trong danh sách, selectors này sẽ khớp với bốn phần tử cuối cùng.
Bạn cũng có thể sử dụng các value “chẵn” hoặc “lẻ”, với sự khác biệt là trong trường hợp này, chúng sẽ tính các con bắt đầu từ value cuối cùng:
ul li:nth-last-child[odd] { color: grey; }
: NTH-OF-TYPE
Pseudo-class: nth-of-type hoạt động giống như: nth-child, với sự khác biệt là nó chỉ đếm những phần tử con khớp với phần tử trong selectors.
Điều này có thể rất hữu ích nếu chúng ta muốn nhắm mục tiêu các phần tử có thể chứa các phần tử khác nhau bên trong chúng. Ví dụ: hãy tưởng tượng chúng ta muốn chuyển mỗi đoạn thứ hai thành một khối văn bản màu xanh lam, nhưng chúng tôi muốn bỏ qua các yếu tố khác như hình ảnh hoặc trích dẫn:
p:nth-of-type[even] { color: blue; }
Bạn có thể sử dụng các value tương tự như bạn sẽ sử dụng cho Pseudo-class: nth-child.
:NTH-LAST-OF-TYPE
Bạn đoán nó! Pseudo-class: nth-last-of-type có thể được sử dụng chính xác như Pseudo-class đã nói ở trên: nth-last-child, nhưng lần này, nó sẽ chỉ nhắm mục tiêu các phần tử phù hợp với selectors của chúng tôi:
ul li:nth-last-of-type[-n+4] { color: green; }
Chúng ta có thể khéo léo hơn nữa và kết hợp nhiều Pseudo-class này với nhau trên một selectors lớn. Giả sử tất cả các hình ảnh trong div bài đăng sẽ được làm nổi bên trái, ngoại trừ hình ảnh đầu tiên và hình ảnh cuối cùng [giả sử hình ảnh này sẽ có chiều rộng đầy đủ, vì vậy chúng sẽ không bị nổi]:
.post img:nth-of-type[n+2]:nth-last-of-type[n+2] { float: left; }
Vì vậy, trong phần đầu tiên của selectors này, chúng tôi đang nhắm mục tiêu mọi hình ảnh bắt đầu từ hình ảnh thứ hai. Trong phần thứ hai, chúng tôi đang nhắm mục tiêu mọi hình ảnh ngoại trừ hình cuối cùng. Bởi vì các selectors không loại trừ lẫn nhau, chúng tôi có thể sử dụng cả hai trên một selectors, do đó loại trừ cả phần tử đầu tiên và cuối cùng cùng một lúc!
:LAST-CHILD
Pseudo-class: last-child hoạt động giống như: Pseudo-class con đầu tiên, nhưng thay vào đó nhắm mục tiêu đến phần tử con cuối cùng của phần tử cha.
Hãy để hình ảnh bạn không muốn đoạn cuối cùng trong div bài đăng của mình có lề dưới:
.post > p:last-child { margin-bottom: 0; }
selectors này sẽ nhắm mục tiêu đoạn cuối cùng là đoạn trực tiếp và là đoạn con cuối cùng của một phần tử có lớp “post”.
:FIRST-OF-TYPE và :LAST-OF-TYPE
Pseudo-class: first-of-type được sử dụng để nhắm mục tiêu một phần tử là phần tử đầu tiên của loại nó bên trong cha của nó.
Ví dụ: bạn có thể nhắm mục tiêu đoạn đầu tiên là con trực tiếp của một div cụ thể và viết hoa dòng đầu tiên của nó:
.post > p:first-of-type:first-line { font-variant: small-caps; }
Với selectors này, bạn đảm bảo rằng bạn chỉ nhắm mục tiêu các đoạn là con trực tiếp của div “post” và đó là đoạn đầu tiên phù hợp với phần tử p của chúng tôi.
Pseudo-class: last-of-type hoạt động giống hệt nhau, nhưng thay vào đó, nhắm mục tiêu đến con cuối cùng của loại nó.
:ONLY-CHILD
Pseudo-class: only-child đại diện cho một phần tử là phần tử con duy nhất của lớp cha của nó.
Giả sử bạn có một số hộp [“news”] với các đoạn văn bản bên trong chúng. Khi bạn có nhiều hơn một đoạn văn, bạn muốn văn bản nhỏ hơn so với khi bạn chỉ có một đoạn:
div.news > p { font-size: 1.2em; } div.news > p:only-child { font-size: 1.5em; }
Trong selectors đầu tiên, chúng tôi đang xác định kích thước tổng thể của p phần tử là con trực tiếp của div “tin tức”. Ở phần thứ hai, chúng tôi đang ghi đè kích thước phông chữ trước đó bằng cách nói, nếu phần tử p là phần tử con duy nhất của div “news”, thì kích thước phông chữ của nó phải lớn hơn.
:ONLY-OF-TYPE
Pseudo-class: only-of-type đại diện cho một phần tử là phần tử con duy nhất của lớp cha của nó với cùng một phần tử.
Làm thế nào điều này có thể hữu ích? Hình ảnh bạn có một chuỗi các bài post, mỗi bài được đại diện bởi một div với lớp “post”. Một số người trong số họ có nhiều hơn một hình ảnh, nhưng những người khác chỉ có một hình ảnh. Bạn muốn hình ảnh trong những hình ảnh sau này được căn chỉnh vào giữa, trong khi hình ảnh trên các bài đăng có nhiều hình ảnh sẽ được làm nổi. Điều đó sẽ khá dễ dàng để thực hiện với selectors này:
.post > img { float: left; } .post > img:only-of-type { float: none; margin: auto; }
:EMPTY
Pseudo-class: rỗng đại diện cho một phần tử không có nội dung bên trong nó.
Nó có thể hữu ích theo một số cách. Ví dụ: nếu bạn có nhiều ô trong div “thanh bên” của mình, nhưng không muốn các ô trống xuất hiện trên trang:
#sidebar .box:empty { display: none; }
Hãy lưu ý rằng ngay cả khi có một khoảng trắng trong div “box”, nó sẽ không được CSS coi là trống và do đó sẽ không khớp với selectors.
Ghi chú về hỗ trợ trình duyệt Internet Explorer [cho đến phiên bản 8] không có hỗ trợ cho các Pseudo-class cấu trúc. Firefox, Safari và Opera hỗ trợ các Pseudo-class này trên các bản phát hành mới nhất của họ. Điều này có nghĩa là nếu những gì nó đang được thực hiện với các selectors này là cơ bản cho khả năng sử dụng và khả năng truy cập của trang web hoặc nếu phần lớn khán giả của trang web đang sử dụng IE và bạn không muốn tước đi một số chi tiết thiết kế của họ, thì bạn nên tiếp tục sử dụng các lớp thông thường và các selectors đơn giản hơn để phục vụ cho các trình duyệt đó. Nếu không, bạn chỉ có thể phát điên!
Pseudo-class phủ định #
Pseudo-class phủ định,: not [], cho phép bạn nhắm mục tiêu các phần tử không khớp với selectors được đại diện bởi đối số của nó.
Ví dụ: điều này có thể hữu ích nếu bạn cần tạo kiểu cho tất cả các phần tử đầu vào trong một biểu mẫu, nhưng bạn không muốn các phần tử đầu vào của mình có kiểu gửi được tạo kiểu – bạn muốn chúng được tạo kiểu theo một cách khác -, để trông giống các nút hơn:
input:not[[type="submit"]] { width: 200px; padding: 3px; border: 1px solid #000000; }
Một ví dụ khác: bạn muốn tất cả các đoạn trong div bài đăng của mình có kích thước phông chữ lớn hơn, ngoại trừ kích thước phông chữ cho biết ngày và giờ:
.post p:not[.date] { font-size: 13px; }
Bạn có thể hình dung số lượng khả năng mà selectors này mang lại và số lượng selectors vô dụng mà bạn có thể loại bỏ các tệp CSS của mình có được hỗ trợ rộng rãi không?
Lưu ý về hỗ trợ trình duyệt Internet Explorer là kẻ phá đám thông thường của chúng tôi ở đây: không hỗ trợ gì cả, thậm chí không có trên IE8. Điều này có thể có nghĩa là selectors này vẫn sẽ phải đợi một thời gian trước khi một số nhà phát triển không còn lo sợ về việc thêm chúng vào bảng định kiểu của họ.
Pseudo-Elements #
Phần tử giả cho phép bạn truy cập các phần tử không thực sự tồn tại trong HTML, như dòng đầu tiên của khối văn bản hoặc chữ cái đầu tiên của nó.
Phần tử giả tồn tại trong CSS 2.1, nhưng đặc tả CSS 3 nói rằng chúng nên được sử dụng với dấu hai chấm “::”, để phân biệt chúng với Pseudo-class. Trong CSS 2.1, chúng chỉ được sử dụng với một dấu hai chấm, “:”. Trình duyệt phải có thể chấp nhận cả hai định dạng, ngoại trừ trường hợp phần tử giả có thể chỉ được giới thiệu trong CSS 3.
::FIRST-LINE
::FIRST-LINE sẽ khớp với dòng đầu tiên của phần tử block, khối nội tuyến, chú thích bảng hoặc phần tử cấp ô bảng.
Điều này đặc biệt hữu ích để thêm các chi tiết kiểu chữ tinh tế vào các khối văn bản của bạn, chẳng hạn như chuyển dòng đầu tiên của một bài báo thành các chữ hoa nhỏ:
h1 + p::first-line { font-variant: small-caps; }
Nếu bạn đã chú ý, bạn sẽ biết rằng điều này có nghĩa là đoạn văn xuất hiện ngay sau thẻ h1 [“+”] phải có dòng đầu tiên được viết hoa nhỏ.
Bạn cũng có thể tham chiếu đến dòng đầu tiên của một div cụ thể mà không cần phải tham chiếu đến thẻ đoạn thực tế:
div.post p::first-line { font-variant: small-caps; }
Hoặc đi xa hơn một bước và nhắm mục tiêu cụ thể đoạn đầu tiên trong một div cụ thể:
div.post > p:first-child::first-line { font-variant: small-caps; }
Ở đây, biểu tượng “>” cho biết rằng bạn đang nhắm mục tiêu đến con trực tiếp của div bài đăng, vì vậy nếu đoạn văn nằm bên trong div thứ hai, thì đoạn văn đó sẽ không khớp với selectors này.
::FIRST-LETTER
::FIRST-LETTER sẽ khớp với chữ cái đầu tiên của một block, trừ khi nó đứng trước một số nội dung khác, như hình ảnh, trên cùng một dòng.
Giống như ::FIRST-LINE , ::FIRST-LETTER n thường được sử dụng để thêm chi tiết kiểu chữ vào các phần tử văn bản, chẳng hạn như chữ cái đầu hoặc chữ cái đầu.
Đây là cách bạn có thể sử dụng
p { font-size: 12px; } p::first-letter { font-size: 24px; float: left; }
Hãy nhớ rằng nếu bạn sử dụng cả :: first-line và :: first-letter trong cùng một phần tử, các attributes :: first-letter sẽ ghi đè các attributes tương tự được kế thừa từ :: first-line.
Phần tử này đôi khi có thể tạo ra kết quả không mong muốn, nếu bạn không biết về thông số kỹ thuật W3C: nó thực sự là công cụ chọn CSS có thông số kỹ thuật dài nhất! Vì vậy, bạn nên đọc kỹ chúng nếu bạn định sử dụng nó [như đối với tất cả các selectors khác].
::T::BEFORE và ::AFTER
::BEFORE và ::AFTER được sử dụng để chèn nội dung vào trước hoặc sau nội dung của phần tử, hoàn toàn thông qua CSS.
Các phần tử này sẽ kế thừa nhiều attributes của các phần tử mà chúng đang được gắn vào.
Hình ảnh bạn muốn cho từ “Số đồ họa x:” trước phần mô tả đồ thị và biểu đồ trên trang của bạn. Bạn có thể đạt được điều này mà không cần phải viết các từ “Số đồ họa”, hoặc chính con số:
.post { counter-reset: image; } p.description::before { content: "Figure number " counter[image] ": "; counter-increment: image; }
CSS SElectors Kết luận #
Nói chuyện nhàm chán quá đủ rồi, giờ là lúc bạn lấy thông tin về bài viết này và tự mình thử nó: bắt đầu bằng cách tạo một trang thử nghiệm và kiểm tra tất cả các selectors này, quay lại đây khi nghi ngờ và đảm bảo luôn tham khảo với các thông số kỹ thuật của W3C, nhưng đừng chỉ ngồi đó mà nghĩ rằng vì những selectors này chưa được hỗ trợ rộng rãi nên bạn cũng có thể bỏ qua chúng.
Nếu bạn thích phiêu lưu hơn một chút hoặc nếu bạn không ngại bỏ qua quá khứ chứa đầy các lớp và id vô dụng và không có ngữ nghĩa, tại sao không đưa một hoặc hai selectors CSS mạnh mẽ này vào dự án tiếp theo của bạn? Chúng tôi hứa bạn sẽ không bao giờ nhìn lại.