Bộ chọn CSS (CSS Selector) – học css cơ bản đến nâng cao – VietTuts

Posted on by mtoplistChuyên mục:Top List

CSS Selector hay Bộ chọn CSS được sử dụng để chọn nội dung bạn muốn tạo kiểu. Bộ chọn là một phần của bộ quy tắc CSS. Bộ chọn CSS chọn các phần tử HTML theo id, class, type, thuộc tính…

Có một số loại bộ chọn khác nhau trong CSS như sau:

Bộ chọn CSS phần tử chọn phần tử HTML theo tên. Ví dụ đoạn CSS dưới đây sẽ ảnh hưởng đến nội dung trong phần tử p.

Output:

Bộ chọn id sẽ chọn thuộc tính id của một phần tử HTML để chọn một phần tử cụ thể. Một id luôn luôn là duy nhất trong trang vì vậy nó được chọn để chọn một phần tử độc nhất.

Nó được viết với ký tự thăng (#), tiếp theo là id của phần tử.

Dưới đây là ví dụ với id “para1”.

Output:

Bộ chọn class chọn các phần tử HTML với một thuộc tính class cụ thể.

Lưu ý: Tên lớp không được bắt đầu với một số

Output:

Nếu bạn muốn chỉ định rằng chỉ có một phần tử HTML cụ thể bị ảnh hưởng thì bạn nên sử dụng tên phần tử với bộ chọn lớp.

Ví dụ 2:

Output:

Bộ chọn toàn thể được sử dụng làm ký tự đại diện. Nó chọn tất cả các phần tử trên các trang. Dấu sao (*) đại diện cho tất cả các phần tử. 


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
* {
    color: green;
    font-size: 20px;
}
</style>
</head>
<body>
  <h2>This is heading</h2>
  <p>This style will be applied on every paragraph.</p>
  <p id="para1">Me too!</p>
  <p>And me!</p>
</body>
</html>

mtoplist