Chọn chọn id CSS

Bộ chọn ID

Bộ chọn ID có thể chỉ định phong cách đặc biệt cho yếu tố HTML có ID cụ thể.

Bộ chọn ID được định nghĩa bằng "#".

Dưới đây là hai bộ chọn ID, bộ chọn đầu tiên có thể xác định màu của yếu tố là đỏ, bộ chọn thứ hai xác định màu của yếu tố là xanh:

#red {color:red;}
#green {color:green;}

Trong đoạn mã HTML dưới đây, yếu tố p có thuộc tính ID là red sẽ hiển thị màu đỏ, trong khi yếu tố p có thuộc tính ID là green sẽ hiển thị màu xanh.

<p id="red"> Câu đoạn này là màu đỏ.
<p id="green"> Câu đoạn này là màu xanh.

Lưu ý:Thuộc tính ID chỉ có thể xuất hiện một lần trong mỗi tài liệu HTML. Bạn có muốn biết lý do không, hãy xem XHTML: Khôi phục lại trang web.

Bộ chọn ID và bộ chọn con

Trong bố cục hiện đại, bộ chọn ID thường được sử dụng để xây dựng bộ chọn con.

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

Các phong cách trên chỉ được áp dụng cho các đoạn văn xuất hiện trong yếu tố có ID là sidebar. Yếu tố này có thể là div hoặc ô bảng, mặc dù nó cũng có thể là bảng hoặc yếu tố khối khác. Nó thậm chí có thể là yếu tố nội tuyến, chẳng hạn như <em></em> hoặc <span></span>, nhưng cách sử dụng này là không hợp lệ vì không thể chèn <p> vào yếu tố nội tuyến <span> (nếu bạn quên lý do, hãy xem XHTML: Khôi phục lại trang web）。

Một bộ chọn, nhiều cách sử dụng

Mặc dù các yếu tố được đánh dấu là sidebar chỉ có thể xuất hiện một lần trong tài liệu, bộ chọn ID này cũng có thể được sử dụng nhiều lần như một bộ chọn con:

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}
#sidebar h2 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
	text-align: right;
	}

Ở đây, các yếu tố p trong sidebar khác biệt rõ ràng với các yếu tố p khác trong trang, các yếu tố p trong sidebar nhận được xử lý đặc biệt, đồng thời, các yếu tố h2 trong sidebar cũng nhận được xử lý đặc biệt khác so với các yếu tố h2 khác trong trang.

Chọn chọn riêng lẻ

Chọn chọn id có thể hoạt động độc lập ngay cả khi không được sử dụng để tạo chọn chọn phụ thuộc:

#sidebar {
	border: 1px dotted #000;
	cân không gian: 10px;
	}

Theo quy tắc này, yếu tố có id là sidebar sẽ có một điểm đen có kích thước một pixel làm border, đồng thời xung quanh sẽ có cân không gian nội bộ (padding, không gian bên trong) là 10 pixel. Các trình duyệt Windows/IE cũ có thể bỏ qua quy tắc này, trừ khi bạn đặc biệt định nghĩa yếu tố thuộc tính của chọn chọn này:

div#sidebar {
	border: 1px dotted #000;
	cân không gian: 10px;
	}

Nội dung liên quan

Nếu bạn cần tìm hiểu sâu hơn về ID chọn chọn, hãy đọc hướng dẫn cao cấp của CodeW3C.com:Giải thích chọn chọn id CSS.