Bộ chọn CSS cơ bản

Bộ chọn là gì?

Bộ chọn CSS là phần đầu tiên của Quy tắc CSS. Đây là mẫu các phần tử và các thuật ngữ khác cho trình duyệt biết phần tử HTML nào cần áp dụng các giá trị thuộc tính CSS bên trong quy tắc. Phần tử hoặc các phần tử được chọn bởi bộ chọn được gọi là chủ đề của bộ chọn.

Trong các bài viết trước, bạn đã gặp nhiều bộ chọn khác nhau và học rằng có các bộ chọn nhắm mục tiêu tài liệu theo các cách khác nhau; ví dụ, bằng cách chọn một phần tử như h1, hoặc một lớp như .special. Hãy bắt đầu bằng cách ôn lại các bộ chọn chính mà bạn đã thấy.

Bộ chọn theo loại

Một bộ chọn theo loại đôi khi được gọi là bộ chọn tên thẻ hoặc bộ chọn phần tử vì nó chọn một thẻ/phần tử HTML trong tài liệu của bạn. Trong ví dụ bên dưới, chúng ta đã sử dụng bộ chọn span, em và strong.

Hãy thử chỉnh sửa ví dụ sau (nhấp "Play" để mở nó trong MDN Playground) để thêm quy tắc CSS chọn phần tử <h1> và thay đổi màu của nó thành màu xanh lam:

<h1>Type selectors</h1>
<p>
  Veggies es bonus vobis, proinde vos postulo essum magis
  <span>kohlrabi welsh onion</span> daikon amaranth tatsoi tomatillo melon azuki
  bean garlic.
</p>

<p>
  Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley
  shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra
  wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>

<p>
  Turnip greens yarrow ricebean rutabaga <em>endive cauliflower</em> sea lettuce
  kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
  purslane kale. Celery potato scallion desert raisin horseradish spinach
</p>

body {
  font-family: sans-serif;
}

span {
  background-color: yellow;
}

strong {
  color: rebeccapurple;
}

em {
  color: rebeccapurple;
}

Bộ chọn lớp

Bộ chọn lớp phân biệt hoa thường bắt đầu bằng ký tự dấu chấm (.). Nó sẽ chọn mọi thứ trong tài liệu có lớp đó được áp dụng. Trong ví dụ trực tiếp bên dưới, chúng ta đã tạo một lớp gọi là highlight và áp dụng nó ở một số nơi trong tài liệu. Tất cả các phần tử có lớp đó đều được tô sáng.

<h1 class="highlight">Class selectors</h1>
<p>
  Veggies es bonus vobis, proinde vos postulo essum magis
  <span class="highlight">kohlrabi welsh onion</span> daikon amaranth tatsoi
  tomatillo melon azuki bean garlic.
</p>

<p class="highlight">
  Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley
  shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra
  wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>

body {
  font-family: sans-serif;
}

.highlight {
  background-color: yellow;
}

Thử nghiệm với bộ chọn lớp

Hãy thử chỉnh sửa ví dụ trên (sử dụng MDN Playground) để thực hiện các thay đổi sau:

1. Chỉnh sửa HTML để thay đổi nội dung mà kiểu .highlight được áp dụng. Ví dụ, bạn có thể thêm một số phần tử <span> để bọc các phần khác nhau của nội dung hiện có và áp dụng lớp highlight cho chúng, xóa một số lớp highlight hiện có, hoặc thêm nội dung mới để áp dụng lớp highlight.
2. Chỉnh sửa CSS để sửa đổi các khai báo bên trong quy tắc .highlight, thêm khai báo mới nếu bạn muốn, và lưu ý cách điều này ảnh hưởng đến việc tạo kiểu của tất cả các phần tử có lớp highlight được áp dụng.
3. Tạo quy tắc lớp mới bên trong CSS với các khai báo khác nhau bên trong (ví dụ, với bộ chọn .highlight2), sau đó thử áp dụng nó cho một số HTML của bạn.

Nhắm mục tiêu lớp trên các phần tử cụ thể

Bạn có thể tạo bộ chọn nhắm mục tiêu các phần tử cụ thể có lớp được áp dụng. Trong ví dụ tiếp theo, chúng ta sẽ làm nổi bật <span> với lớp highlight khác với tiêu đề <h1> với lớp highlight. Chúng ta làm điều này bằng cách sử dụng bộ chọn theo loại cho phần tử chúng ta muốn nhắm mục tiêu, với lớp được thêm vào bằng dấu chấm, không có khoảng trắng ở giữa.

<h1 class="highlight">Class selectors</h1>
<p>
  Veggies es bonus vobis, proinde vos postulo essum magis
  <span class="highlight">kohlrabi welsh onion</span> daikon amaranth tatsoi
  tomatillo melon azuki bean garlic.
</p>

<p class="highlight">
  Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley
  shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra
  wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>

body {
  font-family: sans-serif;
}

span.highlight {
  background-color: yellow;
}

h1.highlight {
  background-color: pink;
}

Cách tiếp cận này thu hẹp phạm vi của quy tắc. Quy tắc sẽ chỉ áp dụng cho sự kết hợp cụ thể đó của phần tử và lớp. Bạn sẽ cần thêm một bộ chọn khác nếu bạn muốn quy tắc áp dụng cho các phần tử khác.

Nhắm mục tiêu phần tử nếu nó có nhiều hơn một lớp được áp dụng

Bạn có thể áp dụng nhiều lớp cho một phần tử và nhắm mục tiêu chúng riêng lẻ, hoặc chỉ chọn phần tử khi tất cả các lớp trong bộ chọn đều có mặt. Điều này có thể hữu ích khi xây dựng các thành phần có thể kết hợp theo các cách khác nhau trên trang web của bạn.

Trong ví dụ bên dưới, chúng ta có một <div> chứa một ghi chú. Đường viền màu xám được áp dụng khi hộp có lớp notebox. Nếu nó cũng có lớp warning hoặc danger, chúng ta thay đổi border-color.

Chúng ta có thể nói với trình duyệt rằng chúng ta chỉ muốn khớp với phần tử nếu nó có hai lớp được áp dụng bằng cách nối chúng lại với nhau mà không có khoảng trắng ở giữa. Bạn sẽ thấy rằng <div> cuối cùng không được áp dụng bất kỳ kiểu nào vì nó chỉ có lớp danger. Để có bất kỳ kiểu nào được áp dụng, nó cũng cần lớp notebox.

<div class="notebox">This is an informational note.</div>

<div class="notebox warning">This note shows a warning.</div>

<div class="notebox danger">This note shows danger!</div>

<div class="danger">
  This won't get styled — it also needs to have the notebox class
</div>

body {
  font-family: sans-serif;
}

.notebox {
  border: 4px solid #666666;
  padding: 0.5em;
  margin: 0.5em;
}

.notebox.warning {
  border-color: orange;
  font-weight: bold;
}

.notebox.danger {
  border-color: red;
  font-weight: bold;
}

Bộ chọn ID

Bộ chọn ID phân biệt hoa thường bắt đầu bằng # thay vì ký tự dấu chấm, nhưng được sử dụng theo cách tương tự như bộ chọn lớp. Sự khác biệt là ID chỉ có thể được sử dụng một lần trên mỗi trang, và các phần tử chỉ có thể có một giá trị id duy nhất. Bộ chọn ID chọn một phần tử có id cụ thể, và bạn có thể đặt trước ID với bộ chọn theo loại để chỉ nhắm mục tiêu phần tử nếu cả phần tử và ID đều khớp. Bạn có thể thấy cả hai cách sử dụng này trong ví dụ sau:

<h1 id="heading">ID selector</h1>
<p>
  Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
  daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>

<p id="one">
  Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley
  shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra
  wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>

body {
  font-family: sans-serif;
}

#one {
  background-color: yellow;
}

h1#heading {
  color: rebeccapurple;
}

Thử nghiệm với bộ chọn ID

Hãy thử chỉnh sửa ví dụ trên để thực hiện các thay đổi sau:

1. Chỉnh sửa HTML để áp dụng kiểu #one cho đoạn đầu tiên thay vì đoạn thứ hai.
2. Chỉnh sửa CSS để sửa đổi các khai báo bên trong các bộ chọn ID, và lưu ý cách điều này thay đổi giao diện của HTML.

Danh sách bộ chọn

Nếu bạn muốn áp dụng cùng CSS cho nhiều mục, bạn có thể kết hợp các bộ chọn riêng lẻ thành một danh sách bộ chọn. Quy tắc sau đó được áp dụng cho tất cả các bộ chọn riêng lẻ. Ví dụ, nếu tôi có cùng CSS cho bộ chọn h1 và .special, tôi có thể viết này thành hai quy tắc riêng biệt.

h1 {
  color: blue;
}

.special {
  color: blue;
}

Tôi cũng có thể kết hợp chúng thành một danh sách bộ chọn bằng cách thêm dấu phẩy giữa chúng.

h1, .special {
  color: blue;
}

Khoảng trắng hợp lệ trước hoặc sau dấu phẩy. Bạn cũng có thể thấy các bộ chọn dễ đọc hơn nếu mỗi bộ chọn nằm trên một dòng mới.

h1,
.special {
  color: blue;
}

Thử nghiệm với danh sách bộ chọn

Trong ví dụ bên dưới, hãy thử kết hợp hai bộ chọn có khai báo giống nhau. Màn hình trực quan sẽ giống nhau sau đó.

<h1>Type selectors</h1>
<p>
  Veggies es bonus vobis, proinde vos postulo essum magis
  <span>kohlrabi welsh onion</span> daikon amaranth tatsoi tomatillo melon azuki
  bean garlic.
</p>

<p>
  Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley
  shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra
  wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>

<p>
  Turnip greens yarrow ricebean rutabaga <em>endive cauliflower</em> sea lettuce
  kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
  purslane kale. Celery potato scallion desert raisin horseradish spinach
</p>

body {
  font-family: sans-serif;
}
span {
  background-color: yellow;
}

strong {
  color: rebeccapurple;
}

em {
  color: rebeccapurple;
}

Bộ chọn không hợp lệ trong danh sách bộ chọn

Khi bạn nhóm các bộ chọn theo cách này, nếu bất kỳ bộ chọn nào không hợp lệ về mặt cú pháp, toàn bộ quy tắc sẽ bị bỏ qua.

Trong ví dụ sau, quy tắc bộ chọn lớp không hợp lệ sẽ bị bỏ qua, trong khi h1 vẫn được tạo kiểu.

h1 {
  color: blue;
}

..special {
  color: blue;
}

Tuy nhiên, khi kết hợp, cả h1 lẫn lớp sẽ không được tạo kiểu vì toàn bộ quy tắc được coi là không hợp lệ.

h1, ..special {
  color: blue;
}

Bộ chọn toàn cục

Bộ chọn toàn cục được biểu thị bằng dấu hoa thị (*). Nó chọn mọi thứ trong tài liệu. Nếu * được nối bằng bộ kết hợp hậu duệ, nó chọn mọi thứ bên trong phần tử tổ tiên đó. Ví dụ, p * chọn tất cả các phần tử lồng bên trong phần tử <p>.

Trong ví dụ sau, chúng ta sử dụng bộ chọn toàn cục để xóa lề trên tất cả các phần tử. Thay vì kiểu mặc định của trình duyệt, vốn cách các tiêu đề và đoạn văn bằng lề, mọi thứ đều gần nhau.

<h1>Universal selector</h1>
<p>
  Veggies es bonus vobis, proinde vos postulo essum magis
  <span>kohlrabi welsh onion</span> daikon amaranth tatsoi tomatillo melon azuki
  bean garlic.
</p>

<p>
  Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley
  shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra
  wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>

body {
  font-family: sans-serif;
}

* {
  margin: 0;
}

Loại hành vi này đôi khi được thấy trong "bảng kiểu đặt lại", loại bỏ tất cả kiểu trình duyệt. Vì bộ chọn toàn cục thực hiện các thay đổi toàn cục, chúng ta sử dụng nó cho các tình huống rất cụ thể, chẳng hạn như tình huống được mô tả bên dưới.

Sử dụng bộ chọn toàn cục để làm cho bộ chọn của bạn dễ đọc hơn

Một cách sử dụng của bộ chọn toàn cục là để làm cho các bộ chọn dễ đọc hơn và trực quan hơn. Ví dụ, nếu chúng ta muốn chọn tất cả các phần tử hậu duệ của phần tử <article> là phần tử con đầu tiên của cha chúng, bao gồm cả phần tử con trực tiếp, chúng ta có thể sử dụng lớp giả :first-child. Chúng ta sẽ học thêm về điều này trong lớp giả và phần tử giả:

article :first-child {
  font-weight: bold;
}

Tuy nhiên, bộ chọn này có thể bị nhầm lẫn với article:first-child, sẽ chọn bất kỳ phần tử <article> nào là phần tử con đầu tiên của phần tử khác.

Để tránh sự nhầm lẫn này, chúng ta có thể thêm bộ chọn toàn cục vào lớp giả :first-child, để rõ ràng hơn bộ chọn đang làm gì. Nó đang chọn bất kỳ phần tử nào là phần tử con đầu tiên của phần tử <article>, hoặc phần tử con đầu tiên của bất kỳ phần tử hậu duệ nào của <article>:

article *:first-child {
  font-weight: bold;
}

Cả hai đều tương đương, nhưng một số người thấy tùy chọn thứ hai dễ đọc hơn.

Tóm tắt

Trong bài viết này, chúng ta đã ôn lại các bộ chọn CSS, cho phép bạn nhắm mục tiêu các phần tử HTML cụ thể, xem xét bộ chọn theo loại, lớp và ID chi tiết hơn so với trước đây. Trong bài viết tiếp theo, chúng ta sẽ tìm hiểu sâu hơn về bộ chọn thuộc tính.

Xem thêm

CSS classes, Scrimba ^{Đối tác học tập MDN}

Bài học tương tác cung cấp một số hướng dẫn về các lớp CSS.

• Previous
• Overview: Kiến thức cơ bản về CSS
• Next