Tổ hợp phức tạp của bộ chọn phần tử con và lớp trong CSS
Bây giờ giả sử chúng ta có đoạn mã sau:
<div class="block">
<h2 class="header">Tiêu đề h2</h2>
<p>
văn bản
</p>
<h3 class="header">Tiêu đề h3</h3>
<p>
văn bản
</p>
<p>
văn bản
</p>
</div>
<div class="block">
<h2 class="header">Tiêu đề h2</h2>
<p>
văn bản
</p>
<h3 class="header">Tiêu đề h3</h3>
<p>
văn bản
</p>
<p>
văn bản
</p>
</div>
Hãy tìm tất cả các phần tử có lớp header,
nằm bên trong phần tử có lớp block,
và đặt font chữ cho chúng là Arial:
.block .header {
font-family: Arial;
}
Như thấy trong mã HTML, bên trong phần tử với
lớp block, các phần tử với lớp header
có thể là tiêu đề h2, hoặc
là tiêu đề h3. Hãy viết
các bộ chọn phân biệt các tiêu đề này, và làm điều gì đó
với chúng.
Hãy chọn tất cả h2 với lớp header,
nằm bên trong phần tử có lớp block:
.block h2.header {
font-size: 30px;
color: red;
}
Và bây giờ hãy chọn tất cả h3 với lớp
header, nằm bên trong phần tử
có lớp block:
.block h3.header {
font-size: 20px;
color: green;
}
Hãy tập hợp toàn bộ CSS của chúng ta lại với nhau:
.block .header {
font-family: Arial;
}
.block h2.header {
font-size: 30px;
color: red;
}
.block h3.header {
font-size: 20px;
color: green;
}
Áp dụng nó vào mã HTML của chúng ta:
Hãy giải thích bộ chọn trong đoạn mã dưới đây chọn cái gì. Sau đó viết mã HTML phù hợp với bộ chọn này. Đây là mã với bộ chọn:
.eee .bbb {
color: red;
}
Hãy giải thích bộ chọn trong đoạn mã dưới đây chọn cái gì. Sau đó viết mã HTML phù hợp với bộ chọn này. Đây là mã với bộ chọn:
.eee h2 {
color: red;
}
Hãy giải thích bộ chọn trong đoạn mã dưới đây chọn cái gì. Sau đó viết mã HTML phù hợp với bộ chọn này. Đây là mã với bộ chọn:
.eee h2.bbb {
color: red;
}
Hãy giải thích bộ chọn trong đoạn mã dưới đây chọn cái gì. Sau đó viết mã HTML phù hợp với bộ chọn này. Đây là mã với bộ chọn:
.eee h3.bbb {
color: red;
}
Hãy giải thích bộ chọn trong đoạn mã dưới đây chọn cái gì. Sau đó viết mã HTML phù hợp với bộ chọn này. Đây là mã với bộ chọn:
.eee p.bbb {
color: red;
}
Hãy giải thích bộ chọn trong đoạn mã dưới đây chọn cái gì. Sau đó viết mã HTML phù hợp với bộ chọn này. Đây là mã với bộ chọn:
.eee .bbb .kkk {
color: red;
}
