tag01~tag02
Định nghĩa và sử dụng “tag01~tag02” chọn tất cả thành phần <tag02> khi có thành phần <tag01> ở trước. Cả thành phần <tag02> và <tag01> nên cùng cấp với nhau, cùng nằm trong thành phần cha (khác cấp sẽ không có tác dụng). Cấu trúc tag01~tag02 { property: value; } Ví dụ Html viết: <html> […]
Định nghĩa và sử dụng
- “tag01~tag02” chọn tất cả thành phần <tag02> khi có thành phần <tag01> ở trước.
- Cả thành phần <tag02> và <tag01> nên cùng cấp với nhau, cùng nằm trong thành phần cha (khác cấp sẽ không có tác dụng).
Cấu trúc
tag01~tag02 {
property: value;
}
Ví dụ
Html viết:
<html>
<head></head>
<body>
<p>p trước thành phần ul</p>
<ul>
<li>Thành phần ul</li>
</ul>
<p>p sau thành phần ul</p>
<p>p sau thành phần ul</p>
<div>
<p>p sau thành phần ul nhưng khác cấp</p>
</div>
<p>p sau thành phần ul</p>
<p>p sau thành phần ul</p>
</body>
</html>
Hiển thị trình duyệt khi chưa có CSS:
p trước thành phần ul
- Thành phần ul
p sau thành phần ul
p sau thành phần ul
p sau thành phần ul nhưng khác cấp
p sau thành phần ul
p sau thành phần ul
CSS viết:
ul~p{
color: blue;
}
Hiển thị trình duyệt:
p trước thành phần ul
- Thành phần ul
p sau thành phần ul
p sau thành phần ul
p sau thành phần ul nhưng khác cấp
p sau thành phần ul
p sau thành phần ul
Ta thấy những thành phần p ở vị trí sau thành phần ul đều đã được chọn, ngoại trừ thành phần p ở vị trí trước thành phần ul và thành phần p ở vị trí khác cấp với thành phần ul.
Trình duyệt hỗ trợ
- Internet Explorer
- Firefox
- Opera
- Google Chrome
- Safari
