Lớp giả và trạng thái tương tác CSS

```html <p><a href="dich.html">Mở trang mẫu</a></p> <button type="button">Đưa chuột lên nút</button> ``` ```css body { font-size: 16px; } button { font-size: 16px; } a:link { color: red; } a:visited { color: green; } a:hover { color: magenta; } a:active { color: maroon; } a:focus { outline: 2px solid blue; } button:hover { font-size: 150%; } ``` Liên kết chưa truy cập có chữ đỏ. Sau khi mở trang đích rồi quay lại, trình duyệt có thể trình bày nó theo :visited với màu green. Trạng thái này còn phụ thuộc lịch sử và chế độ trình duyệt; một liên kết không được coi là đã truy cập chỉ vì đã đưa chuột lên. :hover đặt chữ magenta; :active đặt chữ maroon trong lúc kích hoạt. Các quy tắc liên kết cùng mức được xếp link → visited → hover → active, nên màu lúc giữ chuột không bị quy tắc hover trước đó thay lại. :focus đặt viền bao xanh dương giúp nhìn thấy tiêu điểm. Nút có cỡ ban đầu 16px, cha cũng 16px. Khi hover, font-size:150% tính theo cỡ cha nên thành 24px. Không suy mọi giá trị 150% đều tính theo cỡ cũ của chính phần tử.