Bộ chọn Nâng cao trong CSS bao gồm bộ chọn Anh chị em liền kề, bộ chọn thuộc tính, bộ chọn con trực tiếp, bộ chọn loại thứ n, v.v. Nó cũng bao gồm Bộ chọn anh chị em chung, một ví dụ được hiển thị bên dưới:
h1 ~ h3
Ví dụ về bộ chọn con trực tiếp -
div > span
Sau đây là đoạn mã hiển thị các bộ chọn nâng cao trong CSS -
Ví dụ
<html>
<head>
<style>
#red {
color: red;
}
.green {
background: green;
}
ul:nth-of-type(1) {
background: rgb(0, 174, 255);
}
ul + h3 {
border: 4px solid rgb(19, 0, 128);
}
a[href="https://www.wikipedia.org"] {
font-size: 25px;
}
h1 ~ h3 {
font-size: 40px;
}
div > span {
background-color: DodgerBlue;
}
</style>
</head>
<body>
<h1>Advanced Selectors Example</h1>
<ul>
<li>Cow</li>
<li>Dog</li>
<li>Cat</li>
</ul>
<ul>
<li>Puma</li>
<li>Leopard</li>
<li>Cheetah</li>
</ul>
<h3>Animals</h3>
<div>
<span>Text sample</span>
<p>
Paragraph Text
<span>span text</span>
</p>
<p class="green">Paragraph Text</p>
<p id="red">Paragraph Text.</p>
<p class="green">Paragraph Text</p>
</div>
<a href="https://www.google.com">www.google.com</a>
<a href="https://www.wikipedia.org" target="_blank">www.wikipedia.org</a>
</body>
</html> Đầu ra
Đoạn mã trên sẽ tạo ra kết quả sau -
