Thực hành về kết hợp bộ chọn CSS
Viết một bộ chọn, bộ chọn này sẽ chọn các đoạn văn,
nằm bên trong các div div. Kiểm tra
bộ chọn của bạn trên mã sau:
<div>
<p>
+++
</p>
<p>
+++
</p>
</div>
<div>
<p>
+++
</p>
</div>
<p>
---
</p>
<p>
---
</p>
Viết một bộ chọn, bộ chọn này sẽ chọn tất cả các h2,
nằm bên trong các div div. Kiểm tra
bộ chọn của bạn trên mã sau:
<div>
<h2>+++</h2>
<p>
---
</p>
<p>
---
</p>
</div>
<div>
<h2>+++</h2>
<p>
---
</p>
</div>
<h2>---</h2>
<p>
---
</p>
Viết một bộ chọn, bộ chọn này sẽ chọn tất cả các đoạn văn
p từ phần tử có id bằng
block. Kiểm tra bộ chọn của bạn trên
mã sau:
<div id="block">
<h2>---</h2>
<p>
+++
</p>
<p>
+++
</p>
</div>
<div>
<h2>---</h2>
<p>
---
</p>
</div>
<h2>---</h2>
<p>
---
</p>
Viết một bộ chọn, bộ chọn này sẽ chọn tất cả các h2
từ phần tử có id bằng block.
Kiểm tra bộ chọn của bạn trên mã sau:
<div id="block">
<h2>+++</h2>
<p>
---
</p>
<p>
---
</p>
<h2>+++</h2>
<p>
---
</p>
</div>
<div>
<h2>---</h2>
<p>
---
</p>
</div>
<h2>---</h2>
<p>
---
</p>
Viết một bộ chọn, bộ chọn này sẽ chọn tất cả các phần tử
có lớp bbb. Kiểm tra bộ chọn của bạn
trên mã sau:
<div id="block">
<h2 class="bbb">+++</h2>
<p class="bbb">
+++
</p>
<p>
---
</p>
<h2 class="bbb">+++</h2>
<p>
---
</p>
</div>
<div class="bbb">
+++
</div>
<h2>---</h2>
<p class="bbb">
+++
</p>
Viết một bộ chọn, bộ chọn này sẽ chọn tất cả các phần tử
có lớp bbb từ phần tử có id,
bằng block. Kiểm tra bộ chọn của bạn
trên mã sau:
<div id="block">
<h2 class="bbb">+++</h2>
<p class="bbb">
+++
</p>
<p>
---
</p>
<h2 class="bbb">+++</h2>
<p>
---
</p>
</div>
<div class="bbb">
---
</div>
<h2>---</h2>
<p class="bbb">
---
</p>
Viết một bộ chọn, bộ chọn này sẽ chọn tất cả các đoạn văn
p có lớp bbb. Kiểm tra
bộ chọn của bạn trên mã sau:
<div id="block">
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
<p>
---
</p>
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
</div>
<div class="bbb">
---
</div>
<h2>---</h2>
<p class="bbb">
+++
</p>
Viết một bộ chọn, bộ chọn này sẽ chọn tất cả các h2
có lớp bbb. Kiểm tra bộ chọn của bạn
trên mã sau:
<div id="block">
<h2 class="bbb">+++</h2>
<p class="bbb">
---
</p>
<p>
---
</p>
<h2 class="bbb">+++</h2>
<p class="bbb">
---
</p>
</div>
<h2>---</h2>
<p class="bbb">
---
</p>
<h2 class="bbb">+++</h2>
<p class="bbb">
---
</p>
Viết một bộ chọn, bộ chọn này sẽ chọn tất cả các đoạn văn
p có lớp bbb từ phần tử
có id, bằng block. Kiểm tra
bộ chọn của bạn trên mã sau:
<div id="block">
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
<p>
---
</p>
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
</div>
<div class="bbb">
---
</div>
<h2>---</h2>
<p class="bbb">
---
</p>
Viết một bộ chọn, bộ chọn này sẽ chọn tất cả các phần tử
có lớp bbb và các phần tử có lớp
xxx đồng thời (tức là cần nhóm
các bộ chọn bằng dấu phẩy). Kiểm tra bộ chọn của bạn
trên mã sau:
<h2 class="bbb">+++</h2>
<p class="bbb">
+++
</p>
<h2 class="xxx">+++</h2>
<p>
---
</p>
<h2>---</h2>
<p class="xxx">
+++
</p>
<div class="bbb">
+++
</div>
Viết một bộ chọn, bộ chọn này sẽ chọn tất cả các đoạn văn
p có lớp bbb và đồng thời
tất cả các h2 có lớp xxx. Kiểm tra
bộ chọn của bạn trên mã sau:
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
<h2 class="xxx">+++</h2>
<p>
---
</p>
<h2>---</h2>
<p class="xxx">
---
</p>
<div class="bbb">
---
</div>
Viết một bộ chọn, bộ chọn này sẽ chọn tất cả các đoạn văn
p có lớp bbb từ phần tử
có id, bằng block và đồng thời
tất cả các đoạn văn p có lớp xxx
từ phần tử có id, bằng block.
Kiểm tra bộ chọn của bạn trên mã sau:
<div id="block">
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
<h2 class="xxx">---</h2>
<p>
---
</p>
<h2>---</h2>
<p class="xxx">
+++
</p>
<div class="bbb">
---
</div>
<div class="xxx">
---
</div>
</div>
<h2 class="bbb">---</h2>
<p class="xxx">
---
</p>
Viết một bộ chọn, bộ chọn này sẽ chọn tất cả các phần tử
có lớp fff. Kiểm tra bộ chọn của bạn
trên mã sau:
<div class="fff">
+++
</div>
<h2 class="fff">+++</h2>
<p class="fff">
+++
</p>
<h2 class="bbb">---</h2>
<p class="xxx">
---
</p>
Viết một bộ chọn, bộ chọn này sẽ chọn tất cả các đoạn văn
p từ phần tử có lớp fff.
Kiểm tra bộ chọn của bạn trên
mã sau:
<div class="fff">
<h2>---</h2>
<p>
+++
</p>
<p>
+++
</p>
</div>
<h2 class="fff">---</h2>
<p class="fff">
---
</p>
Viết một bộ chọn, bộ chọn này sẽ chọn tất cả các đoạn văn
p có lớp fff. Kiểm tra
bộ chọn của bạn trên mã sau:
<div id="block">
<h2>---</h2>
<p>
---
</p>
<p>
---
</p>
<p class="fff">
+++
</p>
</div>
<h2 class="fff">---</h2>
<p class="fff">
+++
</p>
Viết một bộ chọn, bộ chọn này sẽ chọn tất cả các phần tử
có lớp bbb từ phần tử có lớp
fff. Kiểm tra bộ chọn của bạn trên mã sau:
<div class="fff">
<h2 class="bbb">+++</h2>
<p>
---
</p>
<p>
---
</p>
<p class="bbb">
+++
</p>
</div>
<h2 class="fff">---</h2>
<p class="bbb">
---
</p>
Viết một bộ chọn, bộ chọn này sẽ chọn tất cả các h2
có lớp bbb từ phần tử có lớp
fff. Kiểm tra bộ chọn của bạn trên mã sau:
<div class="fff">
<h2 class="bbb">+++</h2>
<p>
---
</p>
<h2 class="bbb">+++</h2>
<p>
---
</p>
<p class="bbb">
---
</p>
</div>
<h2 class="bbb">---</h2>
<p class="bbb">
---
</p>
<p class="fff">
---
</p>
