Bộ chọn theo ngữ cảnh trong CSS

Bộ chọn theo ngữ cảnh, được biểu diễn bằng lệnh khoảng trắng (' '), cho phép chọn các thẻ được lồng bên trong một phần tử cha xác định

Cú pháp

cssselector1 selector2 {
  
}

Ví dụ

Hãy áp dụng cho tất cả các thẻ p nằm bên trong các thẻ div và đổi màu chúng thành đỏ:

html<div>
  <p>
    văn bản
  </p>
  <p>
    văn bản
  </p>
</div>

cssdiv p {
  color: red;
}

Результат:

Ví dụ

Hãy áp dụng cho tất cả các thẻ p nằm bên trong phần tử có #elem và đổi màu chúng thành đỏ:

html<div id="elem">
  <p>
    văn bản
  </p>
  <p>
    văn bản
  </p>
</div>

css#elem p {
  color: red;
}

Результат:

Ví dụ

Hãy áp dụng cho tất cả các thẻ p nằm bên trong các phần tử có lớp .block và đổi màu chúng thành đỏ:

html<div class="block">
  <p>
    văn bản
  </p>
  <p>
    văn bản
  </p>
</div>

css.block p {
  color: red;
}

Результат:

Ví dụ

Hãy áp dụng cho tất cả các thẻ b nằm bên trong các thẻ p, mà chính các thẻ p đó lại nằm bên trong các thẻ div và đổi màu chúng thành đỏ:

html<div>
  <p>
    văn bản <b>+</b>
  </p>
</div>

cssdiv p b {
  color: red;
}

Результат:

Xem thêm