Ví dụ về bộ chọn CSS

Trong CSS, các quy tắc so khớp mẫu xác định quy tắc kiểu nào áp dụng cho các phần tử trong cây tài liệu. Các mẫu này, được gọi là bộ chọn, có thể bao gồm từ các tên phần tử đơn giản đến các mẫu theo ngữ cảnh phong phú. Nếu tất cả các điều kiện trong mẫu là đúng đối với một phần tử nhất định, bộ chọn sẽ khớp với phần tử đó

Phân biệt chữ hoa chữ thường của tên thành phần ngôn ngữ tài liệu trong bộ chọn phụ thuộc vào ngôn ngữ tài liệu. Ví dụ: trong HTML, tên phần tử không phân biệt chữ hoa chữ thường nhưng trong XML chúng phân biệt chữ hoa chữ thường

Bảng sau tóm tắt CSS 2. 1 cú pháp chọn

PatternMeaningĐược mô tả trong phần*Khớp với bất kỳ phần tử nào. Bộ chọn chungEMKết hợp bất kỳ phần tử E nào (i. e. , một phần tử loại E). Bộ chọn loạiE FKết hợp bất kỳ phần tử F nào là phần tử con của phần tử E. Bộ chọn hậu duệE > FKết hợp bất kỳ phần tử F nào là con của phần tử E. Bộ chọn conE. first-childMatch phần tử E khi E là con đầu tiên của phần tử cha của nó. Các. con đầu lòng pseudo-classE. liên kết
E. đã truy cập Khớp phần tử E nếu E là neo nguồn của siêu liên kết mà mục tiêu chưa được truy cập (. liên kết) hoặc đã truy cập (. đã đến thăm). Các lớp giả liên kết. đang hoạt động
E. di chuột
E. focusMatches E trong các hành động nhất định của người dùng. Các lớp giả động. lang(c)Khớp phần tử loại E nếu nó ở ngôn ngữ (con người) c (ngôn ngữ tài liệu chỉ định cách xác định ngôn ngữ). Các. lang() pseudo-classE + FKết hợp bất kỳ phần tử F nào ngay trước phần tử anh em E. Bộ chọn liền kềE[foo]Khớp bất kỳ phần tử E nào với tập thuộc tính "foo" (bất kể giá trị là gì). Bộ chọn thuộc tínhE[foo="warning"]Khớp với bất kỳ phần tử E nào có giá trị thuộc tính "foo" chính xác bằng "cảnh báo". Bộ chọn thuộc tínhE[foo~="warning"]Khớp với bất kỳ phần tử E nào có giá trị thuộc tính "foo" là danh sách các giá trị được phân tách bằng dấu cách, một trong số đó chính xác bằng "cảnh báo". Bộ chọn thuộc tínhE[lang. ="en"]Khớp với bất kỳ phần tử E nào có thuộc tính "lang" có danh sách các giá trị được phân tách bằng dấu gạch nối bắt đầu (từ bên trái) bằng "en". Bộ chọn thuộc tínhDIV. cảnh báoNgôn ngữ cụ thể. (Trong HTML, giống như DIV[class~="warning"]. ) Bộ chọn lớpE#myidKhớp với bất kỳ phần tử E nào có ID bằng "myid". bộ chọn ID

Bộ chọn đơn giản là bộ chọn loại hoặc bộ chọn phổ quát, ngay sau đó là 0 hoặc nhiều bộ chọn thuộc tính, bộ chọn ID hoặc lớp giả, theo bất kỳ thứ tự nào. Bộ chọn đơn giản khớp nếu tất cả các thành phần của nó khớp

Ghi chú. thuật ngữ được sử dụng ở đây trong CSS 2. 1 khác với những gì được sử dụng trong CSS3. Ví dụ: "bộ chọn đơn giản" dùng để chỉ một phần nhỏ hơn của bộ chọn trong CSS3 so với trong CSS 2. 1. Xem mô-đun Bộ chọn CSS3 [CSS3SEL]

Bộ chọn là một chuỗi gồm một hoặc nhiều bộ chọn đơn giản được phân tách bằng tổ hợp. Bộ kết hợp là. khoảng trắng, ">" và "+". Khoảng trắng có thể xuất hiện giữa bộ kết hợp và bộ chọn đơn giản xung quanh nó

Các phần tử của cây tài liệu khớp với bộ chọn được gọi là chủ thể của bộ chọn. Bộ chọn bao gồm một bộ chọn đơn giản khớp với bất kỳ phần tử nào đáp ứng yêu cầu của nó. Việc thêm một bộ chọn đơn giản và bộ kết hợp vào một chuỗi sẽ áp đặt các ràng buộc khớp bổ sung, do đó, các đối tượng của bộ chọn luôn là một tập hợp con của các phần tử khớp với bộ chọn đơn giản cuối cùng

Một phần tử giả có thể được thêm vào bộ chọn đơn giản cuối cùng trong chuỗi, trong trường hợp đó, thông tin kiểu áp dụng cho một phần con của mỗi chủ đề

Khi một số bộ chọn chia sẻ cùng một khai báo, chúng có thể được nhóm thành một danh sách được phân tách bằng dấu phẩy

(các) ví dụ

Trong ví dụ này, chúng tôi cô đọng ba quy tắc với các khai báo giống hệt nhau thành một. Như vậy,

h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }

tương đương với

h1, h2, h3 { font-family: sans-serif }

CSS cũng cung cấp các cơ chế "tốc ký" khác, bao gồm nhiều khai báo và thuộc tính tốc ký

Bộ chọn chung, được viết "*", khớp với tên của bất kỳ loại phần tử nào. Nó khớp với bất kỳ phần tử đơn lẻ nào trong cây tài liệu

Nếu bộ chọn phổ quát không phải là thành phần duy nhất của bộ chọn đơn giản, "*" có thể được bỏ qua. Ví dụ

  • This headline 
    is very important
    
    2 và
    This headline 
    is very important
    
    3 là tương đương
  • This headline 
    is very important
    
    4 và
    This headline 
    is very important
    
    5 là tương đương
  • This headline 
    is very important
    
    6 và
    This headline 
    is very important
    
    7 là tương đương

Bộ chọn loại khớp với tên của loại phần tử ngôn ngữ tài liệu. Bộ chọn loại khớp với mọi phiên bản của loại phần tử trong cây tài liệu

(các) ví dụ

Quy tắc sau khớp với tất cả các phần tử H1 trong cây tài liệu

________số 8

Đôi khi, các tác giả có thể muốn các bộ chọn khớp với một phần tử là hậu duệ của một phần tử khác trong cây tài liệu (e. g. , "Khớp với các phần tử EM được chứa bởi phần tử H1"). Bộ chọn hậu duệ thể hiện mối quan hệ như vậy trong một mẫu. Bộ chọn hậu duệ được tạo thành từ hai hoặc nhiều bộ chọn được phân tách bằng khoảng trắng. Bộ chọn hậu duệ có dạng "

This headline 
is very important
8" khớp khi một phần tử
This headline 
is very important
9 là hậu duệ tùy ý của một số phần tử tổ tiên
h1, h2, h3 { font-family: sans-serif }
10

(các) ví dụ

Ví dụ, hãy xem xét các quy tắc sau

h1, h2, h3 { font-family: sans-serif }
2

Mặc dù mục đích của các quy tắc này là thêm điểm nhấn cho văn bản bằng cách thay đổi màu của văn bản, nhưng hiệu ứng sẽ bị mất trong trường hợp chẳng hạn như

h1, h2, h3 { font-family: sans-serif }
3

Chúng tôi giải quyết trường hợp này bằng cách bổ sung các quy tắc trước đó bằng quy tắc đặt màu văn bản thành màu xanh bất cứ khi nào EM xuất hiện ở bất kỳ đâu trong H1

h1, h2, h3 { font-family: sans-serif }
4

Quy tắc thứ ba sẽ phù hợp với EM trong đoạn sau

This headline 
is very important

(các) ví dụ

Bộ chọn sau

h1, h2, h3 { font-family: sans-serif }
1

khớp với phần tử P là cháu hoặc hậu duệ sau này của phần tử DIV. Lưu ý rằng khoảng trắng ở hai bên của "*" không phải là một phần của bộ chọn chung;

(các) ví dụ

Bộ chọn trong quy tắc sau, kết hợp bộ chọn thuộc tính và bộ chọn con cháu, khớp với bất kỳ phần tử nào (1) có bộ thuộc tính "href" và (2) nằm trong P mà chính nó nằm trong DIV

h1, h2, h3 { font-family: sans-serif }
7

Bộ chọn con khớp khi một phần tử là con của một số phần tử. Bộ chọn con được tạo thành từ hai hoặc nhiều bộ chọn được phân tách bằng dấu ">"

(các) ví dụ

Quy tắc sau đặt kiểu của tất cả các phần tử P là con của BODY

h1, h2, h3 { font-family: sans-serif }
8

(các) ví dụ

Ví dụ sau kết hợp bộ chọn con cháu và bộ chọn con

h1, h2, h3 { font-family: sans-serif }
0

Nó khớp với phần tử P là hậu duệ của LI; . Lưu ý rằng khoảng trắng tùy chọn xung quanh bộ kết hợp ">" đã bị loại bỏ

Để biết thông tin về cách chọn con đầu tiên của một phần tử, vui lòng xem phần trên. lớp giả con đầu lòng bên dưới

Bộ chọn anh chị em liền kề có cú pháp sau. E1 + E2, trong đó E2 là đối tượng của bộ chọn. Bộ chọn khớp nếu E1 và E2 chia sẻ cùng một gốc trong cây tài liệu và E1 ngay trước E2, bỏ qua các nút không phải phần tử (chẳng hạn như nút văn bản và nhận xét)

(các) ví dụ

Do đó, quy tắc sau đây nêu rõ rằng khi phần tử P ngay sau phần tử MATH thì nó không được thụt vào

h1, h2, h3 { font-family: sans-serif }
1

Ví dụ tiếp theo giảm khoảng cách dọc ngăn cách H1 và H2 ngay sau nó

h1, h2, h3 { font-family: sans-serif }
2

(các) ví dụ

Quy tắc sau tương tự như quy tắc trong ví dụ trước, ngoại trừ việc nó thêm bộ chọn lớp. Do đó, định dạng đặc biệt chỉ xảy ra khi H1 có class="opener"

h1, h2, h3 { font-family: sans-serif }
3

CSS 2. 1 cho phép tác giả chỉ định các quy tắc khớp với các phần tử có các thuộc tính nhất định được xác định trong tài liệu nguồn

Bộ chọn thuộc tính có thể khớp theo bốn cách

h1, h2, h3 { font-family: sans-serif }
11Khớp khi phần tử đặt thuộc tính "att", bất kể giá trị của thuộc tính là gì.
h1, h2, h3 { font-family: sans-serif }
12Khớp khi giá trị thuộc tính "att" của phần tử chính xác là "val".
h1, h2, h3 { font-family: sans-serif }
13Đại diện cho một phần tử có thuộc tính
h1, h2, h3 { font-family: sans-serif }
14 có giá trị là danh sách các từ được phân tách bằng khoảng trắng, một trong số đó chính xác là "val". Nếu "val" chứa khoảng trắng, nó sẽ không bao giờ đại diện cho bất cứ thứ gì (vì các từ được phân tách bằng dấu cách). Nếu "val" là chuỗi trống, thì nó cũng sẽ không bao giờ đại diện cho bất kỳ thứ gì.
h1, h2, h3 { font-family: sans-serif }
15Đại diện cho một phần tử có thuộc tính
h1, h2, h3 { font-family: sans-serif }
14, giá trị của nó chính xác là "val" hoặc bắt đầu bằng "val" ngay sau dấu "-" (U+002D). Điều này chủ yếu nhằm mục đích cho phép khớp mã con ngôn ngữ (e. g. , thuộc tính
h1, h2, h3 { font-family: sans-serif }
17 trên phần tử
h1, h2, h3 { font-family: sans-serif }
18 trong HTML) như được mô tả trong BCP 47 ([BCP47]) hoặc phần kế tiếp của nó. Để khớp mã con ngôn ngữ
h1, h2, h3 { font-family: sans-serif }
19 (hoặc
h1, h2, h3 { font-family: sans-serif }
70), vui lòng xem lớp giả
h1, h2, h3 { font-family: sans-serif }
71

Giá trị thuộc tính phải là định danh hoặc chuỗi. Phân biệt chữ hoa chữ thường của tên và giá trị thuộc tính trong bộ chọn tùy thuộc vào ngôn ngữ tài liệu

(các) ví dụ

Ví dụ: bộ chọn thuộc tính sau khớp với tất cả các phần tử H1 chỉ định thuộc tính "tiêu đề", bất kể giá trị của nó là gì

h1, h2, h3 { font-family: sans-serif }
4

(các) ví dụ

Trong ví dụ sau, bộ chọn khớp với tất cả các phần tử SPAN có thuộc tính "class" có chính xác giá trị "example"

h1, h2, h3 { font-family: sans-serif }
5

Nhiều bộ chọn thuộc tính có thể được sử dụng để chỉ một số thuộc tính của một phần tử hoặc thậm chí nhiều lần cho cùng một thuộc tính

(các) ví dụ

Ở đây, bộ chọn khớp với tất cả các phần tử SPAN có thuộc tính "xin chào" có giá trị chính xác là "Cleveland" và thuộc tính "tạm biệt" có giá trị chính xác là "Columbus"

h1, h2, h3 { font-family: sans-serif }
6

(các) ví dụ

Các bộ chọn sau đây minh họa sự khác biệt giữa "=" và "~=". Ví dụ: bộ chọn đầu tiên sẽ khớp với giá trị "bản quyền copyleft copyeditor" cho thuộc tính "rel". Bộ chọn thứ hai sẽ chỉ khớp khi thuộc tính "href" có giá trị "http. //www. w3. tổ chức/"

h1, h2, h3 { font-family: sans-serif }
7

(các) ví dụ

Quy tắc sau ẩn tất cả các phần tử có giá trị của thuộc tính "lang" là "fr" (i. e. , ngôn ngữ là tiếng Pháp)

h1, h2, h3 { font-family: sans-serif }
8

(các) ví dụ

Quy tắc sau sẽ khớp với các giá trị của thuộc tính "lang" bắt đầu bằng "en", bao gồm "en", "en-US" và "en-cockney"

h1, h2, h3 { font-family: sans-serif }
9

(các) ví dụ

Tương tự, các quy tắc biểu định kiểu âm thanh sau đây cho phép đọc to một tập lệnh bằng các giọng khác nhau cho từng vai trò

h1 { font-family: sans-serif }
0

So khớp diễn ra trên các giá trị thuộc tính trong cây tài liệu. Các giá trị thuộc tính mặc định có thể được xác định trong DTD hoặc ở nơi khác, nhưng không phải lúc nào cũng được chọn bởi bộ chọn thuộc tính. Biểu định kiểu phải được thiết kế để chúng hoạt động ngay cả khi các giá trị mặc định không được bao gồm trong cây tài liệu

Chính xác hơn, một UA có thể, nhưng không bắt buộc, đọc "tập hợp con bên ngoài" của DTD nhưng được yêu cầu tìm kiếm các giá trị thuộc tính mặc định trong "tập hợp con bên trong" của tài liệu. " (Xem [XML10] để biết định nghĩa của các tập hợp con này. ) Tùy thuộc vào UA, giá trị thuộc tính mặc định được xác định trong tập hợp con bên ngoài của DTD có thể xuất hiện hoặc không xuất hiện trong cây tài liệu

Một UA nhận ra không gian tên XML [XMLNAMESPACES] có thể, nhưng không bắt buộc, sử dụng kiến ​​thức của mình về không gian tên đó để xử lý các giá trị thuộc tính mặc định như thể chúng có trong tài liệu. (E. g. , một XHTML UA không bắt buộc phải sử dụng kiến ​​thức tích hợp sẵn về XHTML DTD. )

Lưu ý rằng, thông thường, việc triển khai chọn bỏ qua các tập hợp con bên ngoài

(các) ví dụ

Thí dụ

Ví dụ: hãy xem xét một phần tử VÍ DỤ có thuộc tính "ký hiệu" có giá trị mặc định là "thập phân". Đoạn DTD có thể là

h1 { font-family: sans-serif }
1

Nếu biểu định kiểu chứa các quy tắc

h1 { font-family: sans-serif }
2

quy tắc đầu tiên có thể không khớp với các phần tử có thuộc tính "ký hiệu" được đặt theo mặc định, tôi. e. , không được đặt rõ ràng. Để nắm bắt tất cả các trường hợp, bộ chọn thuộc tính cho giá trị mặc định phải được loại bỏ

h1 { font-family: sans-serif }
3

Ở đây, vì bộ chọn

h1, h2, h3 { font-family: sans-serif }
72 cụ thể hơn bộ chọn kiểu đơn thuần, nên các khai báo kiểu trong quy tắc thứ hai sẽ ghi đè lên các khai báo trong quy tắc đầu tiên đối với các phần tử có giá trị thuộc tính "ký hiệu" là "bát phân". Phải cẩn thận rằng tất cả các khai báo thuộc tính chỉ áp dụng cho trường hợp mặc định đều bị ghi đè trong quy tắc kiểu của trường hợp không mặc định

Khi làm việc với HTML, tác giả có thể sử dụng ký hiệu dấu chấm (

h1, h2, h3 { font-family: sans-serif }
73) thay thế cho ký hiệu
h1, h2, h3 { font-family: sans-serif }
74 khi đại diện cho thuộc tính
h1, h2, h3 { font-family: sans-serif }
75. Như vậy, đối với HTML,
h1, h2, h3 { font-family: sans-serif }
76 và
h1, h2, h3 { font-family: sans-serif }
77 có cùng ý nghĩa. Giá trị thuộc tính phải ngay sau "thời gian" (
h1, h2, h3 { font-family: sans-serif }
73). UA có thể áp dụng bộ chọn bằng cách sử dụng khoảng thời gian (. ) trong tài liệu XML nếu UA có kiến ​​thức cụ thể về không gian tên cho phép nó xác định thuộc tính nào là thuộc tính "lớp" cho không gian tên tương ứng. Một ví dụ như vậy về kiến ​​thức cụ thể về không gian tên là văn xuôi trong đặc tả cho một không gian tên cụ thể (e. g. , SVG 1. 1 [SVG11] mô tả thuộc tính "lớp" SVG và cách UA nên diễn giải thuộc tính này và tương tự như vậy MathML 3. 0 [MATH30] mô tả thuộc tính "lớp" MathML. )

(các) ví dụ

Ví dụ: chúng ta có thể gán thông tin kiểu cho tất cả các phần tử với class~="pastoral" như sau

h1 { font-family: sans-serif }
4hoặc chỉ
h1 { font-family: sans-serif }
5

Phần sau chỉ gán kiểu cho các phần tử H1 với class~="pastoral"

h1 { font-family: sans-serif }
6

Với các quy tắc này, phiên bản H1 đầu tiên bên dưới sẽ không có văn bản màu xanh lá cây, trong khi phiên bản thứ hai sẽ

h1 { font-family: sans-serif }
7

Để khớp với một tập hợp con các giá trị "lớp", trước mỗi giá trị phải có dấu ". "

(các) ví dụ

Ví dụ: quy tắc sau khớp với bất kỳ phần tử P nào có thuộc tính "lớp" đã được gán một danh sách các giá trị được phân tách bằng dấu cách bao gồm "mục vụ" và "hàng hải"

h1 { font-family: sans-serif }
8

Quy tắc này phù hợp khi class="pastoral blue aqua marine" nhưng không phù hợp với class="pastoral blue"

Ghi chú. CSS cung cấp rất nhiều quyền lực cho thuộc tính "lớp", đến mức các tác giả có thể hình dung được việc thiết kế "ngôn ngữ tài liệu" của riêng họ dựa trên các phần tử hầu như không có bản trình bày liên quan (chẳng hạn như DIV và SPAN trong HTML) và gán thông tin kiểu thông qua thuộc tính "lớp". Tác giả nên tránh thực hành này vì các yếu tố cấu trúc của ngôn ngữ tài liệu thường có ý nghĩa được công nhận và chấp nhận và các lớp do tác giả định nghĩa có thể không

Ghi chú. Nếu một phần tử có nhiều thuộc tính lớp, giá trị của chúng phải được nối với khoảng cách giữa các giá trị trước khi tìm kiếm lớp. Tuy nhiên, tại thời điểm này, nhóm làm việc không biết về bất kỳ cách nào có thể đạt được tình huống này, vì vậy hành vi này rõ ràng là không quy chuẩn trong thông số kỹ thuật này

Ngôn ngữ tài liệu có thể chứa các thuộc tính được khai báo là loại ID. Điều làm cho các thuộc tính của loại ID trở nên đặc biệt là không có hai thuộc tính như vậy có thể có cùng một giá trị; . Trong HTML, tất cả các thuộc tính ID được đặt tên là "id";

Thuộc tính ID của ngôn ngữ tài liệu cho phép tác giả gán mã định danh cho một thể hiện phần tử trong cây tài liệu. Bộ chọn ID CSS khớp với một phiên bản phần tử dựa trên mã định danh của nó. Bộ chọn ID CSS chứa "#" ngay sau giá trị ID, giá trị này phải là giá trị nhận dạng

Lưu ý rằng CSS không chỉ định cách UA biết thuộc tính ID của một phần tử. UA có thể, e. g. , đọc DTD của tài liệu, mã hóa cứng thông tin hoặc hỏi người dùng

(các) ví dụ

Bộ chọn ID sau khớp với phần tử H1 có thuộc tính ID có giá trị "chapter1"

h1 { font-family: sans-serif }
9

Trong ví dụ sau, quy tắc kiểu khớp với phần tử có giá trị ID "z98y". Do đó, quy tắc sẽ khớp với phần tử P

h1, h2, h3 { font-family: sans-serif }
20

Tuy nhiên, trong ví dụ tiếp theo, quy tắc kiểu sẽ chỉ khớp với phần tử H1 có giá trị ID là "z98y". Quy tắc sẽ không khớp với phần tử P trong ví dụ này

h1, h2, h3 { font-family: sans-serif }
21

Bộ chọn ID có độ đặc hiệu cao hơn bộ chọn thuộc tính. Ví dụ: trong HTML, bộ chọn #p123 cụ thể hơn [id=p123] về tầng

Ghi chú. Trong XML1. 0 [XML10], thông tin về thuộc tính nào chứa ID của phần tử được chứa trong DTD. Khi phân tích cú pháp XML, các UA không phải lúc nào cũng đọc DTD và do đó có thể không biết ID của một phần tử là gì. Nếu một nhà thiết kế biểu định kiểu biết hoặc nghi ngờ rằng đây sẽ là trường hợp, anh ta nên sử dụng các bộ chọn thuộc tính bình thường để thay thế.

h1, h2, h3 { font-family: sans-serif }
79 thay vì
h1, h2, h3 { font-family: sans-serif }
80. Tuy nhiên, thứ tự xếp tầng của bộ chọn thuộc tính thông thường khác với bộ chọn ID. Có thể cần phải thêm một ". quan trọng" ưu tiên cho các tuyên bố.
h1, h2, h3 { font-family: sans-serif }
81

Nếu một phần tử có nhiều thuộc tính ID, thì tất cả chúng phải được coi là ID cho phần tử đó vì mục đích của bộ chọn ID. Tình huống như vậy có thể đạt được bằng cách sử dụng hỗn hợp xml. id [XMLID], DOM3 Core [DOM-LEVEL-3-CORE], XML DTDs [XML10] và kiến ​​thức về không gian tên cụ thể

Trong CSS 2. 1, kiểu thường được gắn vào một phần tử dựa trên vị trí của nó trong cây tài liệu. Mô hình đơn giản này là đủ cho nhiều trường hợp, nhưng một số tình huống xuất bản phổ biến có thể không thực hiện được do cấu trúc của cây tài liệu. Chẳng hạn, trong HTML 4 (xem [HTML4]), không có phần tử nào đề cập đến dòng đầu tiên của đoạn văn và do đó, không bộ chọn CSS đơn giản nào có thể đề cập đến nó

CSS giới thiệu các khái niệm về phần tử giả và lớp giả để cho phép định dạng dựa trên thông tin nằm bên ngoài cây tài liệu

  • Các phần tử giả tạo các phần trừu tượng về cây tài liệu ngoài những phần được chỉ định bởi ngôn ngữ tài liệu. Chẳng hạn, ngôn ngữ tài liệu không cung cấp cơ chế để truy cập chữ cái đầu tiên hoặc dòng đầu tiên của nội dung phần tử. Các phần tử giả CSS cho phép các nhà thiết kế biểu định kiểu tham khảo thông tin không thể truy cập này. Các phần tử giả cũng có thể cung cấp cho người thiết kế biểu định kiểu cách gán kiểu cho nội dung không tồn tại trong tài liệu nguồn (e. g. , các. trước và. sau khi các phần tử giả cấp quyền truy cập vào nội dung được tạo)
  • Các lớp giả phân loại các phần tử dựa trên các đặc điểm khác ngoài tên, thuộc tính hoặc nội dung của chúng; . Các lớp giả có thể động, theo nghĩa là một phần tử có thể có hoặc mất một lớp giả trong khi người dùng tương tác với tài liệu. Các trường hợp ngoại lệ là '. con đầu lòng', có thể được suy ra từ cây tài liệu và '. lang()', có thể được suy ra từ cây tài liệu trong một số trường hợp

Cả phần tử giả và lớp giả đều không xuất hiện trong nguồn tài liệu hoặc cây tài liệu

Các lớp giả được phép ở bất kỳ đâu trong bộ chọn trong khi các phần tử giả chỉ có thể được thêm vào sau bộ chọn đơn giản cuối cùng của bộ chọn

Tên phần tử giả và tên lớp giả không phân biệt chữ hoa chữ thường

Một số lớp giả loại trừ lẫn nhau, trong khi những lớp khác có thể được áp dụng đồng thời cho cùng một phần tử. Trong trường hợp các quy tắc xung đột, thứ tự xếp tầng bình thường sẽ xác định kết quả

Các. lớp giả con đầu tiên khớp với một phần tử là phần tử con đầu tiên của một số phần tử khác

(các) ví dụ

Trong ví dụ sau, bộ chọn khớp với bất kỳ phần tử P nào là phần tử con đầu tiên của phần tử DIV. Quy tắc chặn thụt đầu dòng cho đoạn đầu tiên của DIV

h1, h2, h3 { font-family: sans-serif }
22Bộ chọn này sẽ khớp với P bên trong DIV của đoạn sau.
h1, h2, h3 { font-family: sans-serif }
23nhưng sẽ không khớp với chữ P thứ hai trong đoạn sau.
h1, h2, h3 { font-family: sans-serif }
24

(các) ví dụ

Quy tắc sau đây đặt trọng số phông chữ thành 'đậm' cho bất kỳ phần tử EM nào là hậu duệ của phần tử P là phần tử con đầu tiên

h1, h2, h3 { font-family: sans-serif }
25

Lưu ý rằng vì các hộp ẩn danh không phải là một phần của cây tài liệu nên chúng không được tính khi tính con đầu tiên

Ví dụ, người DTTS ở

h1, h2, h3 { font-family: sans-serif }
26là con đầu lòng của nhà P

Hai bộ chọn sau đây là tương đương

h1, h2, h3 { font-family: sans-serif }
27

Tác nhân người dùng thường hiển thị các liên kết chưa được truy cập khác với các liên kết đã truy cập trước đó. CSS cung cấp các lớp giả '. liên kết' và '. thăm' để phân biệt chúng

  • Các. lớp giả liên kết áp dụng cho các liên kết chưa được truy cập
  • Các. lớp giả đã truy cập áp dụng khi liên kết đã được người dùng truy cập

Các UA có thể trả lại một liên kết đã truy cập tới (chưa được truy cập) '. trạng thái liên kết' tại một số điểm

Hai trạng thái loại trừ lẫn nhau

Ngôn ngữ tài liệu xác định phần tử nào là neo nguồn siêu liên kết. Ví dụ: trong HTML4, các lớp giả liên kết áp dụng cho các phần tử A có thuộc tính "href". Do đó, hai CSS sau đây 2. 1 tuyên bố có tác dụng tương tự

h1, h2, h3 { font-family: sans-serif }
28

(các) ví dụ

Nếu liên kết sau

h1, h2, h3 { font-family: sans-serif }
29đã được truy cập, quy tắc này.
h1, h2, h3 { font-family: sans-serif }
30sẽ khiến nó có màu xanh lam

Ghi chú. Tác giả style sheet có thể lạm dụng. liên kết và. đã truy cập các lớp giả để xác định trang web nào người dùng đã truy cập mà không có sự đồng ý của người dùng

Do đó, UA có thể coi tất cả các liên kết là liên kết chưa được truy cập hoặc thực hiện các biện pháp khác để bảo vệ quyền riêng tư của người dùng trong khi hiển thị các liên kết đã truy cập và chưa được truy cập khác nhau. Xem [P3P] để biết thêm thông tin về cách xử lý quyền riêng tư

Tác nhân người dùng tương tác đôi khi thay đổi kết xuất để đáp ứng với hành động của người dùng. CSS cung cấp ba lớp giả cho các trường hợp phổ biến

  • Các. lớp giả di chuột áp dụng trong khi người dùng chỉ định một phần tử (với một số thiết bị trỏ), nhưng không kích hoạt nó. Ví dụ: một tác nhân người dùng trực quan có thể áp dụng lớp giả này khi con trỏ (con trỏ chuột) di chuyển qua một hộp được tạo bởi phần tử. Tác nhân người dùng không hỗ trợ phương tiện tương tác không phải hỗ trợ lớp giả này. Một số tác nhân người dùng phù hợp hỗ trợ phương tiện tương tác có thể không hỗ trợ lớp giả này (e. g. , một thiết bị bút)
  • Các. lớp giả hoạt động áp dụng trong khi một phần tử đang được người dùng kích hoạt. Ví dụ: giữa các lần người dùng nhấn và thả chuột
  • Các. lớp giả tiêu điểm áp dụng trong khi một phần tử có tiêu điểm (chấp nhận các sự kiện bàn phím hoặc các dạng nhập văn bản khác)

Một phần tử có thể khớp với nhiều lớp giả cùng một lúc

CSS không xác định phần tử nào có thể ở các trạng thái trên hoặc cách các trạng thái được nhập và rời. Tập lệnh có thể thay đổi xem các phần tử có phản ứng với các sự kiện của người dùng hay không và các thiết bị và UA khác nhau có thể có các cách trỏ đến hoặc kích hoạt các phần tử khác nhau

CSS 2. 1 không xác định xem phần tử gốc của phần tử có phải là '. đang hoạt động' hoặc '. hover' cũng ở trạng thái đó

Tác nhân người dùng không bắt buộc phải điều chỉnh lại tài liệu hiện đang hiển thị do chuyển đổi lớp giả. Chẳng hạn, một biểu định kiểu có thể chỉ định rằng 'cỡ chữ' của một. liên kết hoạt động phải lớn hơn liên kết không hoạt động, nhưng vì điều này có thể khiến các chữ cái thay đổi vị trí khi người đọc chọn liên kết, UA có thể bỏ qua quy tắc kiểu tương ứng

(các) ví dụ

h1, h2, h3 { font-family: sans-serif }
31

Lưu ý rằng A. di chuột phải được đặt sau A. liên kết và A. các quy tắc đã truy cập, vì nếu không, các quy tắc xếp tầng sẽ ẩn thuộc tính 'màu' của A. quy tắc di chuột. Tương tự, vì A. hoạt động được đặt sau A. di chuột, màu hoạt động (vôi) sẽ áp dụng khi người dùng kích hoạt và di chuột qua phần tử A

(các) ví dụ

Một ví dụ về kết hợp các lớp giả động

h1, h2, h3 { font-family: sans-serif }
32

Bộ chọn cuối cùng khớp với các phần tử A ở lớp giả. tập trung và trong lớp giả. bay lượn

Để biết thông tin về cách trình bày các đường viền tiêu điểm, vui lòng tham khảo phần về các đường viền tiêu điểm động

Ghi chú. Trong CSS1, '. active' lớp giả loại trừ lẫn nhau với '. liên kết' và '. thăm'. Điều này không còn là trường hợp nữa. Một phần tử có thể là cả '. đã đến thăm' và '. đang hoạt động' (hoặc '. liên kết' và '. active') và các quy tắc xếp tầng thông thường xác định kiểu khai báo nào được áp dụng

Ghi chú. Cũng lưu ý rằng trong CSS1, '. active' lớp giả chỉ áp dụng cho các liên kết

Nếu ngôn ngữ tài liệu chỉ định cách xác định ngôn ngữ con người của một phần tử, thì có thể viết các bộ chọn trong CSS khớp với một phần tử dựa trên ngôn ngữ của phần tử đó. Ví dụ: trong HTML [HTML4], ngôn ngữ được xác định bởi sự kết hợp của thuộc tính "lang", phần tử META và có thể bởi thông tin từ giao thức (chẳng hạn như tiêu đề HTTP). XML sử dụng một thuộc tính gọi là xml. lang và có thể có các phương pháp dành riêng cho ngôn ngữ tài liệu khác để xác định ngôn ngữ

Lớp giả'. lang(C)' khớp nếu phần tử ở ngôn ngữ C. Việc có khớp hay không chỉ dựa trên mã định danh C bằng hoặc là chuỗi con được phân tách bằng dấu gạch ngang của giá trị ngôn ngữ của phần tử, giống như cách được thực hiện bởi '. =' toán tử. Việc khớp C với giá trị ngôn ngữ của phần tử được thực hiện không phân biệt chữ hoa chữ thường đối với các ký tự trong phạm vi ASCII. Mã định danh C không nhất thiết phải là tên ngôn ngữ hợp lệ

C không được để trống

Ghi chú. Các tài liệu và giao thức nên biểu thị ngôn ngữ bằng cách sử dụng mã từ BCP 47 [BCP47] hoặc phiên bản kế tiếp của nó và bằng "xml. lang" trong trường hợp tài liệu dựa trên XML [XML10]. Xem "Hỏi đáp. Mã ngôn ngữ hai chữ cái hoặc ba chữ cái. "

(các) ví dụ

Các quy tắc sau đặt dấu ngoặc kép cho tài liệu HTML bằng tiếng Pháp hoặc tiếng Đức của Canada

h1, h2, h3 { font-family: sans-serif }
33

Cặp quy tắc thứ hai thực sự đặt thuộc tính 'trích dẫn' trên các phần tử Q theo ngôn ngữ của phần tử gốc của nó. Điều này được thực hiện bởi vì việc lựa chọn dấu ngoặc kép thường dựa trên ngôn ngữ của phần tử xung quanh câu trích dẫn, chứ không phải bản thân câu trích dẫn. như đoạn tiếng Pháp “à l'improviste” này ở giữa văn bản tiếng Anh sử dụng dấu ngoặc kép tiếng Anh

Lưu ý sự khác biệt giữa [lang. =xx] và. lang(xx). Trong ví dụ HTML này, chỉ phần CƠ THỂ khớp với [lang. =fr] (vì nó có thuộc tính THAM LANG) nhưng cả THÂN và P đều khớp nhau. lang(fr) (vì cả hai đều bằng tiếng Pháp)

h1, h2, h3 { font-family: sans-serif }
34

Các phần tử giả hoạt động giống như các phần tử thực trong CSS với các ngoại lệ được mô tả bên dưới và các nơi khác

Lưu ý rằng các phần bên dưới không xác định kết xuất chính xác của '. dòng đầu tiên' và '. chữ cái đầu tiên' trong mọi trường hợp. Một cấp độ CSS trong tương lai có thể xác định chúng chính xác hơn

5. 12. 1 cái. phần tử giả dòng đầu tiên

Các. phần tử giả dòng đầu tiên áp dụng các kiểu đặc biệt cho nội dung của dòng được định dạng đầu tiên của đoạn văn. Ví dụ

h1, h2, h3 { font-family: sans-serif }
35

Quy tắc trên có nghĩa là "đổi các chữ cái ở dòng đầu tiên của mỗi đoạn văn thành chữ hoa". Tuy nhiên, bộ chọn "P. dòng đầu tiên" không khớp với bất kỳ phần tử HTML thực nào. Nó khớp với một phần tử giả mà các tác nhân người dùng phù hợp sẽ chèn vào đầu mỗi đoạn

Lưu ý rằng độ dài của dòng đầu tiên phụ thuộc vào một số yếu tố, bao gồm chiều rộng của trang, cỡ chữ, v.v. Do đó, một đoạn HTML thông thường chẳng hạn như

h1, h2, h3 { font-family: sans-serif }
36

các dòng xảy ra bị phá vỡ như sau

h1, h2, h3 { font-family: sans-serif }
37

có thể được tác nhân người dùng "viết lại" để bao gồm chuỗi thẻ hư cấu cho. dòng đầu tiên. Trình tự thẻ hư cấu này giúp hiển thị cách các thuộc tính được kế thừa

h1, h2, h3 { font-family: sans-serif }
38

Nếu một phần tử giả phá vỡ một phần tử thực, hiệu ứng mong muốn thường có thể được mô tả bằng một chuỗi thẻ hư cấu đóng và sau đó mở lại phần tử. Do đó, nếu chúng ta đánh dấu đoạn trước bằng phần tử SPAN

h1, h2, h3 { font-family: sans-serif }
39

tác nhân người dùng có thể mô phỏng các thẻ bắt đầu và kết thúc cho SPAN khi chèn chuỗi thẻ hư cấu cho. dòng đầu tiên

h1, h2, h3 { font-family: sans-serif }
40

Các. phần tử giả dòng đầu tiên chỉ có thể được gắn vào phần tử bộ chứa khối

"Dòng được định dạng đầu tiên" của một phần tử có thể xuất hiện bên trong hậu duệ cấp khối trong cùng một luồng (i. e. , hậu duệ cấp khối không được định vị và không phải là số float). e. g. , dòng đầu tiên của DIV trong

h1, h2, h3 { font-family: sans-serif }
82

là dòng đầu tiên của P (giả sử rằng cả P ​​và DIV đều ở cấp độ khối)

Dòng đầu tiên của ô bảng hoặc khối nội tuyến không thể là dòng được định dạng đầu tiên của phần tử tổ tiên. Do đó trong

h1, h2, h3 { font-family: sans-serif }
83

h1, h2, h3 { font-family: sans-serif }
84

dòng được định dạng đầu tiên của DIV không phải là dòng "Xin chào"

Lưu ý rằng dòng đầu tiên của chữ P trong đoạn này

h1, h2, h3 { font-family: sans-serif }
85 không chứa bất kỳ chữ cái nào (giả sử kiểu mặc định cho BR trong HTML 4). Từ "Đầu tiên" không có trên dòng được định dạng đầu tiên

Một UA phải hoạt động như thể các thẻ bắt đầu hư cấu của các phần tử giả dòng đầu tiên được lồng ngay bên trong phần tử cấp khối kèm theo trong cùng. (Vì CSS1 và CSS2 im lặng trong trường hợp này, tác giả không nên dựa vào hành vi này. ) Đây là một ví dụ. Trình tự thẻ hư cấu cho

h1, h2, h3 { font-family: sans-serif }
41

h1, h2, h3 { font-family: sans-serif }
41

Các. phần tử giả dòng đầu tiên tương tự như phần tử cấp nội tuyến, nhưng có một số hạn chế nhất định. Các thuộc tính sau áp dụng cho một. phần tử giả dòng đầu tiên. thuộc tính phông chữ, thuộc tính màu, thuộc tính nền, 'khoảng cách giữa các từ', 'khoảng cách giữa các chữ cái', 'trang trí văn bản', 'chuyển đổi văn bản' và 'chiều cao dòng'. UAs cũng có thể áp dụng các thuộc tính khác

Các. phần tử giả chữ cái đầu tiên phải chọn chữ cái đầu tiên của dòng đầu tiên của một khối, nếu nó không có bất kỳ nội dung nào khác (chẳng hạn như hình ảnh hoặc bảng nội tuyến) đứng trước nó trên dòng của nó. Các. phần tử giả chữ cái đầu tiên có thể được sử dụng cho "viết hoa đầu tiên" và "viết hoa đầu dòng", đây là những hiệu ứng đánh máy phổ biến. Loại chữ cái đầu tiên này tương tự như một phần tử cấp độ nội tuyến nếu thuộc tính 'float' của nó là 'không', nếu không thì nó tương tự như một phần tử float

Đây là những thuộc tính áp dụng cho. các phần tử giả chữ cái đầu tiên. thuộc tính phông chữ, 'trang trí văn bản', 'chuyển đổi văn bản', 'dãn cách chữ cái', 'dãn cách từ' (khi thích hợp), 'chiều cao dòng', 'phao', 'căn dọc' (chỉ khi ' . UAs cũng có thể áp dụng các thuộc tính khác. Để cho phép UA hiển thị chữ hoa đầu dòng hoặc chữ hoa đầu dòng chính xác về mặt chính tả, UA có thể chọn chiều cao, chiều rộng và chiều cao của dòng dựa trên hình dạng của chữ cái, không giống như đối với các phần tử thông thường. CSS3 dự kiến ​​sẽ có các thuộc tính cụ thể áp dụng cho chữ cái đầu tiên

Ví dụ này cho thấy khả năng kết xuất giới hạn ban đầu. Lưu ý rằng 'line-height' được kế thừa bởi phần tử giả chữ cái đầu tiên là 1. 1, nhưng UA trong ví dụ này đã tính chiều cao của chữ cái đầu tiên theo cách khác, để nó không gây ra bất kỳ khoảng trống không cần thiết nào giữa hai dòng đầu tiên. Cũng lưu ý rằng thẻ bắt đầu hư cấu của chữ cái đầu tiên nằm trong SPAN và do đó, độ đậm phông chữ của chữ cái đầu tiên là bình thường, không được in đậm như SPAN

h1, h2, h3 { font-family: sans-serif }
43

Ví dụ về bộ chọn CSS

CSS sau 2. 1 sẽ tạo một chữ hoa đầu dòng kéo dài khoảng hai dòng

h1, h2, h3 { font-family: sans-serif }
44

Ví dụ này có thể được định dạng như sau

Trình tự thẻ hư cấu là

h1, h2, h3 { font-family: sans-serif }
45

Lưu ý rằng. thẻ phần tử giả chữ cái đầu tiên tiếp giáp với nội dung (i. e. , ký tự ban đầu), trong khi. thẻ bắt đầu phần tử giả dòng đầu tiên được chèn ngay sau thẻ bắt đầu của phần tử khối

Để đạt được định dạng chữ hoa đầu dòng truyền thống, tác nhân người dùng có thể ước tính kích thước phông chữ, ví dụ: để căn chỉnh đường cơ sở. Ngoài ra, đường viền glyph có thể được tính đến khi định dạng

Dấu chấm câu (tôi. e, các ký tự được định nghĩa bằng Unicode [UNICODE] trong phần "mở" (Ps), "đóng" (Pe), "ban đầu" (Pi). các lớp dấu câu "cuối cùng" (Pf) và "khác" (Po)), đứng trước hoặc sau chữ cái đầu tiên nên được đưa vào, như trong

Các '. chữ cái đầu tiên' cũng áp dụng nếu chữ cái đầu tiên trên thực tế là một chữ số, e. g. , số "6" trong "67 triệu đô la là rất nhiều tiền. "

Các. phần tử giả chữ cái đầu tiên áp dụng cho các phần tử vùng chứa khối

Các. phần tử giả chữ cái đầu tiên có thể được sử dụng với tất cả các phần tử chứa văn bản hoặc có phần tử con trong cùng một luồng chứa văn bản. UA phải hoạt động như thể thẻ bắt đầu hư cấu của phần tử giả chữ cái đầu tiên nằm ngay trước văn bản đầu tiên của phần tử, ngay cả khi văn bản đầu tiên đó nằm trong phần con cháu

(các) ví dụ

Đây là một ví dụ. Trình tự thẻ hư cấu cho đoạn HTML này

h1, h2, h3 { font-family: sans-serif }
46

h1, h2, h3 { font-family: sans-serif }
46

Chữ cái đầu tiên của ô bảng hoặc khối nội tuyến không được là chữ cái đầu tiên của phần tử tổ tiên. Do đó trong

h1, h2, h3 { font-family: sans-serif }
83

h1, h2, h3 { font-family: sans-serif }
84

chữ cái đầu tiên của DIV không phải là chữ "H". Trên thực tế, DIV không có chữ cái đầu tiên

Chữ cái đầu tiên phải xuất hiện trên dòng được định dạng đầu tiên. Ví dụ, trong đoạn này

h1, h2, h3 { font-family: sans-serif }
85 dòng đầu tiên không chứa bất kỳ chữ cái nào và '. chữ cái đầu tiên' không khớp với bất kỳ thứ gì (giả sử kiểu mặc định cho BR trong HTML 4). Đặc biệt, nó không khớp với chữ "F" của "First. "

Nếu một phần tử là một mục danh sách ('hiển thị. danh sách-mục'), '. chữ cái đầu tiên' áp dụng cho chữ cái đầu tiên trong ô chính sau dấu. UA có thể bỏ qua '. chữ cái đầu tiên' trên các mục danh sách có 'vị trí kiểu danh sách. bên trong'. Nếu một phần tử có '. trước' hoặc '. sau' dung, the'. chữ cái đầu tiên áp dụng cho chữ cái đầu tiên của phần tử bao gồm nội dung đó

E. g. , sau luật 'p. trước {nội dung. "Ghi chú. "}', bộ chọn 'p. chữ cái đầu tiên' khớp với chữ "N" của "Ghi chú"

Một số ngôn ngữ có thể có các quy tắc cụ thể về cách xử lý các tổ hợp chữ cái nhất định. Ví dụ: trong tiếng Hà Lan, nếu tổ hợp chữ cái "ij" xuất hiện ở đầu một từ, cả hai chữ cái sẽ được xem xét trong. phần tử giả chữ cái đầu tiên

Nếu các chữ cái tạo thành chữ cái đầu tiên không nằm trong cùng một phần tử, chẳng hạn như "'T" trong

h1, h2, h3 { font-family: sans-serif }
89, UA có thể tạo phần tử giả chữ cái đầu tiên từ một trong các phần tử, cả hai phần tử hoặc đơn giản là không tạo phần tử giả

Tương tự, nếu (các) chữ cái đầu tiên của khối không ở đầu dòng (ví dụ do sắp xếp lại hai chiều), thì UA không cần tạo (các) phần tử giả

(các) ví dụ

Ví dụ sau minh họa cách các phần tử giả chồng chéo có thể tương tác với nhau. Chữ cái đầu tiên của mỗi phần tử P sẽ có màu xanh lục với cỡ chữ là '24pt'. Phần còn lại của dòng được định dạng đầu tiên sẽ có màu "xanh lam" trong khi phần còn lại của đoạn văn sẽ có màu "đỏ"

h1, h2, h3 { font-family: sans-serif }
48

Giả sử rằng ngắt dòng sẽ xảy ra trước từ "kết thúc", trình tự thẻ hư cấu cho đoạn này có thể là

h1, h2, h3 { font-family: sans-serif }
49

Lưu ý rằng. phần tử chữ cái đầu tiên nằm bên trong. phần tử dòng đầu tiên. Thuộc tính được đặt trên. dòng đầu tiên được kế thừa bởi. chữ cái đầu tiên, nhưng bị ghi đè nếu cùng một thuộc tính được đặt trên. chữ cái đầu tiên

Các '. trước và '. after' phần tử giả có thể được sử dụng để chèn nội dung được tạo trước hoặc sau nội dung của phần tử. Chúng được giải thích trong phần về văn bản được tạo

(các) ví dụ

This headline 
is very important
0

Khi mà. chữ cái đầu tiên và. phần tử giả dòng đầu tiên được áp dụng cho phần tử có nội dung được tạo bằng cách sử dụng. trước và. sau đó, chúng áp dụng cho chữ cái hoặc dòng đầu tiên của phần tử bao gồm nội dung được tạo

5 loại bộ chọn CSS là gì?

Có nhiều loại bộ chọn cơ bản khác nhau. .
Bộ chọn phần tử
bộ chọn id
Bộ chọn lớp
Bộ chọn chung
Bộ chọn nhóm
Bộ chọn thuộc tính
Bộ chọn lớp giả
Bộ chọn phần tử giả

Tất cả các bộ chọn CSS là gì?

Có 6 loại bộ chọn CSS. .
Bộ chọn lớp CSS
Bộ chọn id CSS
Bộ chọn phần tử CSS
Bộ chọn thuộc tính CSS
Bộ chọn lớp giả CSS
Bộ chọn toàn cầu CSS