Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> CSS

Chọn phần tử cụ thể như <p> với CSS (Element Selector)

Bộ chọn phần tử (Element/Type Selector)

Bộ chọn phần tử (element selector) chọn **tất cả các phần tử** có tên thẻ HTML khớp. Đây là bộ chọn cơ bản nhất, độ đặc hiệu thấp nhất (0,0,1).

Cú pháp

ten-the {
  /* Quy tắc CSS áp dụng cho TẤT CẢ thẻ này */
}

Ví dụ: Chọn tất cả <p>

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: blue;
      background-color: orange;
    }
  </style>
</head>
<body>
  <h1>Demo Website</h1>
  <h2>Learning</h2>
  <p>Tutorials on web dev, programming, database, networking, etc.</p>
  <p>Every tutorials has lessons with illustrations and figures.</p>
</body>
</html>

Đặc điểm quan trọng

  • Toàn cục: Áp dụng cho mọi `

    ` trong trang, trừ khi bị ghi đè.

  • Độ đặc hiệu thấp: Dễ bị ghi đè bởi class, ID, inline style.
  • Reset/Normalize: Thường dùng trong CSS reset: p { margin: 0; }.

Kết hợp với các bộ chọn khác

SelectorÝ nghĩa
pTất cả thẻ p
.class pThẻ p bên trong element có class
p.classThẻ p CÓ class này
p#idThẻ p CÓ id này
div > pThẻ p con trực tiếp của div
div pThẻ p bất kỳ cấp bên trong div

Best Practice

Dùng element selector cho base styles (typography, spacing mặc định). Tránh dùng cho layout cụ thể - hãy dùng class (BEM, utility-first).