Bộ chọn CSS

Tìm hiểu tất cả những điều quan trọng nhất về Bộ chọn CSS

Một bộ chọn cho phép chúng tôi kết hợp một hoặc nhiều khai báo với một hoặc nhiều phần tử trên trang.

Bộ chọn cơ bản

Giả sử chúng ta có mộtptrên trang và chúng tôi muốn hiển thị các từ trong đó bằng màu vàng.

Chúng ta có thểMục tiêuphần tử đó bằng cách sử dụng bộ chọn nàyp, nhắm mục tiêu tất cả các phần tử bằng cách sử dụngptrong trang. Một quy tắc CSS đơn giản để đạt được những gì chúng ta muốn là:

p {
  color: yellow;
}

Mỗi thẻ HTML đều có một bộ chọn tương ứng, ví dụ:div,span,img.

Nếu một bộ chọn khớp với nhiều phần tử, tất cả các phần tử trong trang sẽ bị ảnh hưởng bởi sự thay đổi.

Phần tử HTML có 2 thuộc tính rất thường được sử dụng trong CSS để liên kết kiểu với một phần tử cụ thể trên trang:classvàid.

Có một sự khác biệt lớn giữa hai điều đó: bên trong tài liệu HTML, bạn có thể lặp lại cùng mộtclassgiá trị trên nhiều phần tử, nhưng bạn chỉ có thể sử dụng mộtidMột lần. Như một hệ quả tất yếu, bằng cách sử dụng các lớp, bạn có thể chọn một phần tử có 2 hoặc nhiều tên lớp cụ thể, điều không thể sử dụng id.

Các lớp được xác định bằng cách sử dụng.biểu tượng, trong khi id sử dụng#Biểu tượng.

Ví dụ sử dụng một lớp:

<p class="dog-name">
  Roger
</p>
.dog-name {
  color: yellow;
}

Ví dụ sử dụng một id:

<p id="dog-name">
  Roger
</p>
#dog-name {
  color: yellow;
}

Kết hợp các bộ chọn

Cho đến nay, chúng ta đã biết cách nhắm mục tiêu một phần tử, một lớp hoặc một id. Hãy giới thiệu các bộ chọn mạnh mẽ hơn.

Nhắm mục tiêu một phần tử có lớp hoặc id

Bạn có thể nhắm mục tiêu một phần tử cụ thể có một lớp hoặc id, được đính kèm.

Ví dụ sử dụng một lớp:

<p class="dog-name">
  Roger
</p>
p.dog-name {
  color: yellow;
}

Ví dụ sử dụng một id:

<p id="dog-name">
  Roger
</p>
p#dog-name {
  color: yellow;
}

Tại sao bạn muốn làm điều đó, nếu lớp hoặc id đã cung cấp một cách để nhắm mục tiêu phần tử đó? Bạn có thể phải làm điều đó để có nhiều hơntính cụ thể. Chúng ta sẽ xem điều đó có nghĩa là gì sau.

Nhắm mục tiêu nhiều lớp

Bạn có thể nhắm mục tiêu một phần tử với một lớp cụ thể bằng cách sử dụng.class-name, như bạn đã thấy trước đây. Bạn có thể nhắm mục tiêu một phần tử có 2 (hoặc nhiều) lớp bằng cách kết hợp các tên lớp được phân tách bằng dấu chấm, không có dấu cách.

Thí dụ:

<p class="dog-name roger">
  Roger
</p>
.dog-name.roger {
  color: yellow;
}

Kết hợp các lớp và id

Theo cách tương tự, bạn có thể kết hợp một lớp và một id.

Thí dụ:

<p class="dog-name" id="roger">
  Roger
</p>
.dog-name#roger {
  color: yellow;
}

Nhóm bộ chọn

Bạn có thể kết hợp các bộ chọn để áp dụng các khai báo giống nhau cho nhiều bộ chọn. Để làm như vậy, bạn phân tách chúng bằng dấu phẩy.

Thí dụ:

<p>
  My dog name is:
</p>
<span class="dog-name">
  Roger
</span>
p, .dog-name {
  color: yellow;
}

Bạn có thể thêm khoảng trắng trong các khai báo đó để làm cho chúng rõ ràng hơn:

p,
.dog-name {
  color: yellow;
}

Theo dõi cây tài liệu với các bộ chọn

Chúng tôi đã biết cách nhắm mục tiêu một phần tử trong trang bằng cách sử dụng tên thẻ, lớp hoặc id.

Bạn có thể tạo một bộ chọn cụ thể hơn bằng cách kết hợp nhiều mục để tuân theo cấu trúc cây tài liệu. Ví dụ, nếu bạn cóspanthẻ lồng nhau bên trong mộtp, bạn có thể nhắm mục tiêu thẻ đó mà không cần áp dụng kiểu chospanthẻ không được bao gồm trong mộtpnhãn:

<span>
  Hello!
</span>
<p>
  My dog name is:
  <span class="dog-name">
    Roger
  </span>
</p>
p span {
  color: yellow;
}

Xem cách chúng tôi sử dụng khoảng cách giữa hai mã thông báopvàspan.

Điều này hoạt động ngay cả khi phần tử bên phải sâu nhiều cấp.

Để làm cho sự phụ thuộc trở nên nghiêm ngặt ở cấp độ đầu tiên, bạn có thể sử dụng>ký hiệu giữa hai mã thông báo:

p > span {
  color: yellow;
}

Trong trường hợp này, nếuspankhông phải là con đầu lòng củap, nó sẽ không có màu mới được áp dụng.

Trẻ em trực tiếp sẽ được áp dụng kiểu:

<p>
  <span>
    This is yellow
  </span>
  <strong>
    <span>
      This is not yellow
    </span>
  </strong>
</p>

Các bộ chọn anh chị em liền kề cho phép chúng tôi tạo kiểu cho một phần tử chỉ khi đứng trước một phần tử cụ thể. Chúng tôi làm như vậy bằng cách sử dụng+nhà điều hành:

Thí dụ:

p + span {
  color: yellow;
}

Điều này sẽ chỉ định màu vàng cho tất cả các phần tử span đứng trướcpthành phần:

<p>This is a paragraph</p>
<span>This is a yellow span</span>

Chúng tôi có nhiều bộ chọn hơn mà chúng tôi có thể sử dụng:

  • bộ chọn thuộc tính
  • bộ chọn lớp giả
  • bộ chọn phần tử giả

Nhiều hơn về những người trên các bài viết trong tương lai.

Tải xuống miễn phí của tôiSổ tay CSS


Các hướng dẫn css khác:


Công nghệ Wiki trực tuyến!