CSS - Attribute Selectors: Unleashing the Power of Precision Styling

Xin chào các bạn tương lai của CSS! Hôm nay, chúng ta sẽ khám phá thế giới kỳ diệu của CSS attribute selectors. Hãy thắt chặt dây an toàn, vì chúng ta sắp bắt đầu một hành trình sẽ thay đổi cách bạn thiết kế các trang web. Là người giáo viên máy tính gần gũi của bạn, tôi ở đây để hướng dẫn bạn qua cuộc phiêu lưu này với rất nhiều ví dụ, giải thích và có thể cả một两句 joke của bố. Hãy bắt đầu nào!

Description

Trước khi chúng ta nhảy vào phần khó, hãy nói về attribute selectors là gì và tại sao chúng lại tuyệt vời. Hãy tưởng tượng bạn đang ở một bữa tiệc lớn (tài liệu HTML), và bạn muốn tìm tất cả mọi người đang mang giày đỏ (các phần tử với một thuộc tính cụ thể). Attribute selectors giống như một thám tử tiệc của bạn, giúp bạn xác định chính xác ai bạn đang tìm mà không làm rối loạn cả đám đông.

Trong CSS, attribute selectors cho phép chúng ta nhắm mục tiêu các phần tử HTML dựa trên thuộc tính hoặc giá trị thuộc tính của chúng. Điều này mang lại cho chúng ta sự linh hoạt và độ chính xác vô cùng trong việc thiết kế, mà không cần thêm các class hoặc ID. Đó giống như có một cây kéo đa năng cho CSS của bạn - đa năng, chính xác và rất tiện lợi!

Bây giờ, hãy cùng khám phá các loại attribute selectors khác nhau, nhé?

CSS [attribute] Selector

Attribute selector cơ bản nhất là [attribute] selector. Nó nhắm mục tiêu bất kỳ phần tử nào có thuộc tính được chỉ định, bất kể giá trị của nó là gì.

<a href="https://www.example.com">Click me!</a>
<a>I'm just text</a>

<style>
[href] {
color: blue;
text-decoration: none;
}
</style>

Trong ví dụ này, chỉ có liên kết đầu tiên sẽ chuyển sang màu xanh và mất đi gạch chân, vì nó có thuộc tính href. Thẻ <a> thứ hai sẽ không thay đổi. Đó giống như tìm tất cả những người tham gia tiệc có tênetag, bất kể tên của họ là gì!

CSS [attribute="value"] Selector

Khi bạn muốn cụ thể hơn, [attribute="value"] selector sẽ đến cứu giúp. Nó nhắm mục tiêu các phần tử mà thuộc tính khớp với giá trị chính xác.

<input type="text" placeholder="Enter your name">
<input type="password" placeholder="Enter your password">

<style>
[type="password"] {
border: 2px solid red;
}
</style>

Ở đây, chỉ có ô nhập mật khẩu sẽ có viền đỏ. Đó giống như tìm tất cả những người tham gia tiệc có vòng tay vàng!

CSS [attribute*="value"] Selector

The [attribute*="value"] selector giống như một con chó săn - nó phát hiện bất kỳ phần tử nào mà giá trị thuộc tính chứa chuỗi con được chỉ định, ở bất kỳ đâu trong nó.

<p title="I love CSS">Paragraph 1</p>
<p title="HTML is cool">Paragraph 2</p>
<p title="JavaScript rocks">Paragraph 3</p>

<style>
[title*="CSS"] {
font-weight: bold;
}
</style>

Trong trường hợp này, chỉ có "Paragraph 1" sẽ trở thành in đậm, vì tiêu đề của nó chứa "CSS". Đó giống như tìm bất kỳ ai trong tiệc có tên chứa "Smith", dù là John Smith, Smithson hay Blacksmith!

CSS [attribute^="value"] Selector

The [attribute^="value"] selector rất khắt khe - nó chỉ chọn các phần tử mà giá trị thuộc tính bắt đầu với giá trị được chỉ định.

<a href="https://www.example.com">HTTPS Link</a>
<a href="http://www.example.com">HTTP Link</a>

<style>
[href^="https"] {
color: green;
}
</style>

Chỉ liên kết HTTPS sẽ chuyển sang màu xanh. Đó giống như tìm tất cả những người tham gia tiệc có tên bắt đầu với "A"!

CSS [attribute$="value"] Selector

Ngược lại, [attribute$="value"] selector nhắm mục tiêu các phần tử mà giá trị thuộc tính kết thúc với giá trị được chỉ định.

<a href="document.pdf">PDF Document</a>
<a href="image.jpg">JPG Image</a>

<style>
[href$=".pdf"] {
background-color: yellow;
}
</style>

Liên kết PDF sẽ có nền vàng. Đó giống như tìm tất cả những người tham gia tiệc có họ kết thúc với "son"!

CSS [attribute|="value"] Selector

The [attribute|="value"] selector rất đặc biệt. Nó chọn các phần tử mà giá trị thuộc tính chính xác là "value" hoặc bắt đầu với "value" ngay sau đó là một gạch nối.

<p lang="en">English</p>
<p lang="en-US">American English</p>
<p lang="fr">French</p>

<style>
[lang|="en"] {
font-style: italic;
}
</style>

Cả "English" và "American English" sẽ được in nghiêng. Điều này非常适合 việc thiết kế theo ngôn ngữ!

CSS [attribute~="value"] Selector

The [attribute~="value"] selector nhắm mục tiêu các phần tử mà giá trị thuộc tính chứa từ được chỉ định, được bao quanh bởi khoảng trắng.

<p class="fruit apple">Apple</p>
<p class="fruit orange">Orange</p>
<p class="vegetable carrot">Carrot</p>

<style>
[class~="fruit"] {
color: purple;
}
</style>

Cả "Apple" và "Orange" sẽ chuyển sang màu tím. Đó giống như tìm bất kỳ ai trong tiệc có "dancer" là một trong sở thích của họ!

Attribute Selectors For href Links

Attribute selectors rất hữu ích cho việc thiết kế các liên kết dựa trên đích đến của chúng:

<a href="https://www.example.com">External Link</a>
<a href="/internal-page">Internal Link</a>
<a href="document.pdf">PDF Document</a>

<style>
a[href^="https"] {
color: green;
}
a[href^="/"] {
color: blue;
}
a[href$=".pdf"] {
color: red;
}
</style>

Mã này cho các liên kết khác nhau màu sắc khác nhau.

Attribute Selectors For Inputs

Attribute selectors tỏa sáng khi làm việc với các ô nhập liệu:

<input type="text" required>
<input type="email">
<input type="checkbox" checked>

<style>
input[required] {
border: 2px solid red;
}
input[type="email"] {
background-color: lightblue;
}
input[checked] {
outline: 2px solid green;
}
</style>

Việc này làm cho các trường bắt buộc nổi bật, cho ô email nền xanh nhạt và nổi bật các ô kiểm已被选中.

Attribute Selectors For Title

Chúng ta có thể sử dụng attribute selectors để thiết kế các phần tử dựa trên thuộc tính tiêu đề của chúng:

<div title="Important">This is important</div>
<div title="Read more">Click to expand</div>

<style>
[title="Important"] {
font-weight: bold;
color: red;
}
[title*="more"] {
cursor: pointer;
text-decoration: underline;
}
</style>

Điều này làm cho nội dung quan trọng nổi bật và chỉ ra các phần tử có thể nhấp.

Attribute Selectors For Language

Việc thiết kế theo ngôn ngữ trở nên dễ dàng với attribute selectors:

<p lang="en">Hello, World!</p>
<p lang="es">¡Hola, Mundo!</p>
<p lang="fr">Bonjour, le Monde!</p>

<style>
[lang="en"] {
font-family: 'Arial', sans-serif;
}
[lang="es"] {
font-style: italic;
}
[lang="fr"] {
font-weight: bold;
}
</style>

Điều này áp dụng các phong cách khác nhau cho nội dung bằng các ngôn ngữ khác nhau.

CSS Multiple Attribute Selectors

Bạn có thể kết hợp nhiều attribute selectors để có được sự nhắm mục tiêu chính xác hơn:

<a href="https://www.example.com" target="_blank" rel="noopener">Safe External Link</a>
<a href="https://www.example.com">Regular External Link</a>

<style>
a[href^="https"][target="_blank"] {
color: green;
text-decoration: none;
}
</style>

Mã này thiết kế chỉ các liên kết mở trong tab mới.

CSS Attribute Selectors With Sibling Combinator

Attribute selectors có thể được kết hợp với các selector khác cho việc thiết kế nâng cao:

<label for="name">Name:</label>
<input id="name" type="text" required>
<span class="error">Please enter your name</span>

<style>
input[required] + span.error {
display: none;
color: red;
}
input[required]:invalid + span.error {
display: inline;
}
</style>

Điều này hiển thị thông báo lỗi bên cạnh các trường bắt buộc chỉ khi chúng không hợp lệ.

Và đó là tất cả, các bạn! Một hướng dẫn toàn diện về CSS attribute selectors. Nhớ rằng, thực hành là cách tốt nhất để trở thành thạo, vì vậy đừng ngần ngại thử nghiệm các selector này trong các dự án của bạn. Chúng giống như những nguyên liệu bí mật có thể làm cho CSS của bạn từ tốt đến tuyệt vời!

Trước khi chúng ta kết thúc, đây là bảng tóm tắt tất cả các attribute selector chúng ta đã xem xét:

Selector	Example	Description
[attribute]	[href]	Chọn các phần tử có thuộc tính được chỉ định
[attribute="value"]	[type="text"]	Chọn các phần tử có thuộc tính và giá trị được chỉ định
[attribute*="value"]	[title*="hello"]	Chọn các phần tử có giá trị thuộc tính chứa chuỗi con được chỉ định
[attribute^="value"]	[href^="https"]	Chọn các phần tử có giá trị thuộc tính bắt đầu với chuỗi được chỉ định
[attribute$="value"]	[href$=".pdf"]	Chọn các phần tử có giá trị thuộc tính kết thúc với chuỗi được chỉ định
[attribute|="value"]	[lang|="en"]	Chọn các phần tử có giá trị thuộc tính chính xác hoặc bắt đầu với chuỗi được chỉ định tiếp theo là gạch nối
[attribute~="value"]	[class~="highlight"]	Chọn các phần tử có giá trị thuộc tính chứa từ được chỉ định

Chúc các bạn may mắn và may mắn với selector!

Credits: Image by storyset