Chúng tôi sử dụng bộ chọn anh chị em liền kề (+), nếu chúng tôi muốn so khớp phần tử xuất hiện ngay sau bộ chọn đầu tiên. Ở đây, cả hai bộ chọn đều là con của cùng một phần tử mẹ.
Cú pháp của bộ tổ hợp anh chị em kế cận CSS như sau -
Selector + Selector{
attribute: /*value*/
} Nếu chúng ta muốn chọn anh chị em của cùng một cha mẹ bất kể vị trí của phần tử được chọn thứ hai, chúng tôi sử dụng bộ tổ hợp anh chị em chung CSS.
Cú pháp của bộ tổ hợp chung CSS như sau -
Selector ~ Selector{
attribute: /*value*/
} Các ví dụ sau đây minh họa thuộc tính tổ hợp liên kết chung và liền kề CSS.
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
#parent {
display: flex;
margin: 2%;
padding: 2%;
box-shadow: inset 0 0 24px cyan;
justify-content: space-around;
}
div + p {
font-size: 1.2em;
font-weight: bold;
background: powderblue;
}
section {
box-shadow: 0 0 3px rgba(0,0,0,0.8);
}
</style>
</head>
<body>
<div id="parent">
<img src="https://i.picsum.photos/id/616/200/200.jpg?hmac=QEzyEzU6nVn4d_vdALhsT9UAtTU
EVhwrT-kM5ogBqKM" />
<div>
<p>Check this</p>
<section><p>Some text in section</p></section>
<span>hello</span>
</div>
<p>Selected</p>
</div>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
#parent {
display: flex;
margin: 2%;
padding: 2%;
background: thistle;
justify-content: space-between;
}
section ~ p {
text-align: center;
font-size: 1.2em;
font-weight: bold;
background: lavender;
}
</style>
</head>
<body>
<div id="parent">
<img src="https://i.picsum.photos/id/616/200/200.jpg?hmac=QEzyEzU6nVn4d_vdALhsT9UAtTU
EVhwrT-kM5ogBqKM" />
<div>
<p>Random text 1</p>
<section><p>Some text in section</p></section>
<span>hello</span>
<p>Selected</p>
</div>
<img src="https://i.picsum.photos/id/1035/200/200.jpg?hmac=IDuYUZQ_7a6h4pQU2k7p2nxTMjMt4uy-p3ze94KtA4" />
</div>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
