⌘K

Thực hành về kết hợp bộ chọn CSS

Задание 1

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: 

html<div>
  <p>
    +++
  </p>
  <p>
    +++
  </p>
</div>
<div>
  <p>
    +++
  </p>
</div>

<p>
  ---
</p>
<p>
  ---
</p>
Задание 2

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: 

html<div>
  <h2>+++</h2>
  <p>
    ---
  </p>
  <p>
    ---
  </p>
</div>
<div>
  <h2>+++</h2>
  <p>
    ---
  </p>
</div>

<h2>---</h2>
<p>
  ---
</p>
Задание 3

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: 

html<div id="block">
  <h2>---</h2>
  <p>
    +++
  </p>
  <p>
    +++
  </p>
</div>
<div>
  <h2>---</h2>
  <p>
    ---
  </p>
</div>

<h2>---</h2>
<p>
  ---
</p>
Задание 4

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: 

html<div id="block">
  <h2>+++</h2>
  <p>
    ---
  </p>
  <p>
    ---
  </p>
  
  <h2>+++</h2>
  <p>
    ---
  </p>
</div>
<div>
  <h2>---</h2>
  <p>
    ---
  </p>
</div>

<h2>---</h2>
<p>
  ---
</p>
Задание 5

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: 

html<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>
Задание 6

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: 

html<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>
Задание 7

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: 

html<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>
Задание 8

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: 

html<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>
Задание 9

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: 

html<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>
Задание 10

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: 

html<h2 class="bbb">+++</h2>
<p class="bbb">
  +++
</p>

<h2 class="xxx">+++</h2>
<p>
  ---
</p>

<h2>---</h2>
<p class="xxx">
  +++
</p>

<div class="bbb">
  +++
</div>
Задание 11

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: 

html<h2 class="bbb">---</h2>
<p class="bbb">
  +++
</p>

<h2 class="xxx">+++</h2>
<p>
  ---
</p>

<h2>---</h2>
<p class="xxx">
  ---
</p>

<div class="bbb">
  ---
</div>
Задание 12

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: 

html<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>
Задание 13

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: 

html<div class="fff">
  +++
</div>

<h2 class="fff">+++</h2>
<p class="fff">
  +++
</p>

<h2 class="bbb">---</h2>
<p class="xxx">
  ---
</p>
Задание 14

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: 

html<div class="fff">
  <h2>---</h2>
  <p>
    +++
  </p>
  <p>
    +++
  </p>
</div>

<h2 class="fff">---</h2>
<p class="fff">
  ---
</p>
Задание 15

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: 

html<div id="block">
  <h2>---</h2>
  <p>
    ---
  </p>
  <p>
    ---
  </p>
  <p class="fff">
    +++
  </p>
</div>

<h2 class="fff">---</h2>
<p class="fff">
  +++
</p>
Задание 16

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: 

html<div class="fff">
  <h2 class="bbb">+++</h2>
  <p>
    ---
  </p>
  <p>
    ---
  </p>
  <p class="bbb">
    +++
  </p>
</div>

<h2 class="fff">---</h2>
<p class="bbb">
  ---
</p>
Задание 17

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: 

html<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>
BackLỗi khi nhóm các bộ chọn CSS phức tạpNextĐộ Ưu Tiên Của Bộ Chọn CSS