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ộtp
trê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ụngp
trong 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:class
và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ộtclass
giá trị trên nhiều phần tử, nhưng bạn chỉ có thể sử dụng mộtid
Mộ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óspan
thẻ 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 chospan
thẻ không được bao gồm trong mộtp
nhã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áop
và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ếuspan
khô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ướcp
thà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:
- Hướng dẫn Flexbox
- Hướng dẫn về CSS Grid
- Biến CSS (Thuộc tính tùy chỉnh)
- Giới thiệu về PostCSS
- Thuộc tính lề CSS
- Cách căn giữa một phần tử bằng CSS
- Phông chữ Hệ thống CSS
- Cách in HTML của bạn với phong cách
- Hướng dẫn giới thiệu về Chuyển đổi CSS
- Hướng dẫn tạo ảnh động CSS
- Giới thiệu về CSS
- Hướng dẫn CSS
- Cách thiết lập Tailwind với PurgeCSS và PostCSS
- Tờ Tailwind Cheat
- Cách xoay liên tục hình ảnh bằng CSS
- Tạo bảng phản hồi bằng CSS
- Cách gỡ lỗi CSS bằng cách chia đôi
- Bộ chọn CSS
- Xếp tầng CSS
- Đặc tính CSS
- Bộ chọn thuộc tính CSS
- Màu sắc CSS
- Đơn vị CSS
- Url CSS ()
- Kiểu chữ CSS
- Mô hình hộp CSS
- Thuộc tính vị trí CSS
- Truy vấn phương tiện CSS và thiết kế đáp ứng
- Truy vấn tính năng CSS
- Chuyển đổi CSS
- Cách tạo kiểu danh sách bằng CSS
- Tiền tố nhà cung cấp CSS
- Kế thừa CSS
- Lớp giả CSS
- Phần tử giả CSS
- Tạo kiểu bảng HTML bằng CSS
- Thuộc tính Hiển thị CSS
- Hàm calc () CSS
- Đường viền CSS
- Nhập tệp CSS bằng @import
- Xử lý lỗi CSS
- Bộ lọc CSS
- Kích thước hộp CSS
- Nền CSS
- Nhận xét CSS
- Phông chữ CSS
- CSS Padding
- Thuộc tính float CSS và thanh toán bù trừ
- Chuẩn hóa CSS
- Thuộc tính CSS z-index
- Cách tắt lựa chọn văn bản bằng CSS
- Cách đặt một mục ở dưới cùng của vùng chứa bằng CSS
- Cách đảo màu bằng CSS
- Các thẻ pre đáp ứng trong CSS
- Nhúng video YouTube thích ứng
- Giá trị Điểm ngắt CSS tốt cho Thiết kế đáp ứng là gì?
- Cách căn giữa trong flexbox