Điều hướng
- Bộ chọn là gì?
- Các loại bộ chọn trong CSS là gì?
- Bộ chọn thẻ
- Tổng kết: Bộ chọn thẻ có thể tác động trực tiếp đến nhiều thẻ (cách nhau bằng dấu phẩy để nhóm), có thể chọn tất cả các thẻ như div, ul, li, p, v.v., không phụ thuộc vào độ sâu của thẻ, chọn tất cả chứ không phải một thẻ cụ thể, do đó là "điểm chung" chứ không phải "đặc điểm riêng"
- Bộ chọn ID
- Kết quả thực thi
- Tổng kết: Trong cùng một trang, ID không được phép trùng lặp, bất kỳ thẻ nào cũng có thể đặt ID, quy tắc đặt tên ID phải bắt đầu bằng chữ cái, có thể có số, gạch dưới -, phân biệt giữa chữ hoa và chữ thường (aa và AA là hai giá trị thuộc tính khác nhau)
- Bộ chọn lớp
- Kết quả thực thi
- Ví dụ 2 mã
- Kết quả thực thi
- Nhận xét: Sử dụng hiệu quả bộ chọn lớp có thể giảm thiểu mã thừa, các phần tử con sẽ kế thừa một số thuộc tính của phần tử cha, đừng cố gắng dùng một lớp để viết hoàn toàn trang, một thẻ nên mang nhiều lớp, mỗi lớp nên nhỏ nhất có thể, có khái niệm chung, có thể được nhiều thẻ sử dụng
- Sự khác biệt và lựa chọn giữa bộ chọn lớp và ID
- Bộ chọn con cháu
- Kết quả thực thi
- Tổng kết: Sử dụng bộ chọn con cháu giới hạn khoảng chọn, thẻ nào trong thẻ div nào. Giới hạn khu vực logic riêng. Về quy chuẩn bố cục, độ lồng ghép phần tử thường không nên vượt quá 8 tầng, tối đa 256 tầng, nếu vượt quá bộ chọn sẽ không hiệu quả
- Bộ chọn con trực tiếp
- Kết quả thực thi
- Tổng kết: Nếu không muốn chọn bất kỳ phần tử con cháu nào, mà muốn thu hẹp phạm vi chỉ chọn các phần tử con trực tiếp của một phần tử, hãy sử dụng bộ chọn phần tử con
- Kết quả thực thi
- Tổng kết: Bộ chọn phổ quát là bộ chọn mạnh mẽ nhất, chúng ta có thể sử dụng đặc điểm của nó để giúp nhanh chóng重构样式 trong quá trình phát triển
- Bộ chọn nhóm
- Kết quả thực thi
- Tổng kết: Khi cần thực hiện cùng một thao tác trên nhiều phần tử, chúng ta có thể chọn bộ chọn nhóm, thường được sử dụng trong bố cục trang
- Bộ chọn giao
- Kết quả thực thi
- Tổng kết: Ứng dụng bộ chọn giao, trong đó cái đầu tiên phải là bộ chọn thẻ, cái thứ hai phải là bộ chọn lớp hoặc bộ chọn ID; giữa hai bộ chọn này không được có khoảng trắng. Tác động đến việc chồng lên các kiểu mẫu thông thường
- Bộ chọn anh em liền kề
- Kết quả thực thi
- Tổng kết: Ngay sau một phần tử khác, cả hai có cùng phần tử cha
- Bộ chọn anh em chung
- Kết quả thực thi
- Tổng kết: Giữa hai phần tử có phần tử khác, cả hai có cùng phần tử cha
- Bộ chọn thuộc tính
- Kết quả thực thi
- Tổng kết: Bộ chọn thuộc tính là một loại bộ chọn đặc biệt, nó dựa trên thuộc tính và giá trị thuộc tính của phần tử để khớp. Cú pháp chung của chúng bao gồm ngoặc vuông
[], chứa tên thuộc tính, theo sau là điều kiện tùy chọn để khớp giá trị thuộc tính. Bộ chọn thuộc tính có thể được chia thành hai loại dựa trên cách khớp giá trị thuộc tính: Bộ chọn thuộc tính tồn tại và giá trị, và bộ chọn thuộc tính giá trị con chuỗi. - Các ví dụ khác về bộ chọn thuộc tính
- Bộ chọn giả lớp
- Kết quả thực thi
Bộ chọn là gì?
Trong CSS, phần tử trước dấu {} được gọi là "bộ chọn". Bộ chọn chỉ rõ đối tượng mà các "kiểu样式" trong {} tác động, tức là các "kiểu样式" này sẽ tác động đến những phần tử nào trên trang web.
Đơn giản nói, bộ chọn giúp chúng ta chọn những thẻ cần tác động.
Các loại bộ chọn trong CSS là gì?
- Bộ chọn thẻ (còn gọi là bộ chọn phần tử)
- Bộ chọn ID
- Bộ chọn lớp
- Bộ chọn con cháu (còn gọi là bộ chọn chứa)
- Bộ chọn con trực tiếp
- Bộ chọn nhóm
- Bộ chọn giao
- Bộ chọn phổ quát
- Bộ chọn anh em liền kề
- Bộ chọn anh em chung
- Bộ chọn thuộc tính
- Bộ chọn giả lớp
Bộ chọn thẻ
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ví dụ bộ chọn thẻ</title>
<style>
h1, p {
color: #2c3e50;
font-family: Arial, sans-serif;
}
.intro {
font-size: 18px;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>Chào mừng đến với trang web của tôi</h1>
<p class="intro">Đây là một đoạn văn giới thiệu về nội dung trang web.</p>
<p>Đây là một đoạn văn khác để minh họa cho bộ chọn thẻ.</p>
</body>
</html>
-
Kết quả thực thi
-
Tổng kết: Bộ chọn thẻ có thể tác động trực tiếp đến nhiều thẻ (cách nhau bằng dấu phẩy để nhóm), có thể chọn tất cả các thẻ như div, ul, li, p, v.v., không phụ thuộc vào độ sâu của thẻ, chọn tất cả chứ không phải một thẻ cụ thể, do đó là "điểm chung" chứ không phải "đặc điểm riêng"
Bộ chọn ID
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ví dụ bộ chọn ID</title>
<style>
#main-header {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
}
#special-message {
font-weight: bold;
font-size: 24px;
border: 2px solid #e74c3c;
padding: 10px;
}
</style>
</head>
<body>
<header id="main-header">
<h1>Đây là tiêu đề chính</h1>
</header>
<div id="special-message">
Đây là một thông điệp đặc biệt
</div>
<p>ID duy nhất trên mỗi trang giúp định dạng chính xác các phần tử cụ thể.</p>
</body>
</html>
-
Kết quả thực thi
-
Tổng kết: Trong cùng một trang, ID không được phép trùng lặp, bất kỳ thẻ nào cũng có thể đặt ID, quy tắc đặt tên ID phải bắt đầu bằng chữ cái, có thể có số, gạch dưới -, phân biệt giữa chữ hoa và chữ thường (id1 và ID1 là hai giá trị thuộc tính khác nhau)
Bộ chọn lớp
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ví dụ bộ chọn lớp</title>
<style>
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ddd;
}
.highlight {
background-color: #f1c40f;
padding: 10px;
margin: 10px 0;
}
.text-center {
text-align: center;
}
.large-text {
font-size: 24px;
color: #2c3e50;
}
</style>
</head>
<body>
<div class="container">
<h1 class="text-center large-text">Tiêu đề lớn</h1>
<p class="highlight">Đoạn văn này có nền màu vàng và căn giữa.</p>
<p>Đoạn văn thông thường không có lớp đặc biệt.</p>
<div class="highlight text-center">
<p>Đây là một khối có nhiều lớp, kết hợp các kiểu khác nhau.</p>
</div>
</div>
</body>
</html>
-
Kết quả thực thi
-
Ví dụ 2 mã
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ví dụ nâng cao về bộ chọn lớp</title>
<style>
.card {
border: 1px solid #ccc;
border-radius: 5px;
padding: 15px;
margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card-header {
font-weight: bold;
margin-bottom: 10px;
border-bottom: 1px solid #eee;
padding-bottom: 5px;
}
.card-content {
line-height: 1.6;
}
.card-footer {
margin-top: 10px;
text-align: right;
font-style: italic;
color: #666;
}
.important {
background-color: #ffebee;
border-left: 4px solid #f44336;
}
.info {
background-color: #e3f2fd;
border-left: 4px solid #2196f3;
}
</style>
</head>
<body>
<div class="card important">
<div class="card-header">Thông báo quan trọng</div>
<div class="card-content">
Đây là một thông báo quan trọng cần được chú ý đặc biệt.
</div>
<div class="card-footer">Ngày: 15/05/2023</div>
</div>
<div class="card info">
<div class="card-header">Thông tin thêm</div>
<div class="card-content">
Đây là một thông tin bổ sung về chủ đề đang thảo luận.
</div>
<div class="card-footer">Cập nhật: 16/05/2023</div>
</div>
</body>
</html>
-
Kết quả thực thi
-
Nhận xét: Sử dụng hiệu quả bộ chọn lớp có thể giảm thiểu mã thừa, các phần tử con sẽ kế thừa một số thuộc tính của phần tử cha, đừng cố gắng dùng một lớp để viết hoàn toàn trang, một thẻ nên mang nhiều lớp, mỗi lớp nên nhỏ nhất có thể, có khái niệm chung, có thể được nhiều thẻ sử dụng
-
Sự khác biệt và lựa chọn giữa bộ chọn lớp và ID
Bộ chọn lớp và ID có nhiều điểm tương đồng, vậy chúng có thể sử dụng thay thế cho nhau không? Chúng ta hãy cùng tóm tắt điểm giống và khác nhau:
Điểm giống:
Có thể áp dụng cho bất kỳ phần tử nào
Điểm khác:
Bộ chọn ID chỉ có thể sử dụng một lần trong tài liệu. Khác với bộ chọn lớp, trong một tài liệu HTML, bộ chọn ID chỉ có thể sử dụng một lần và chỉ một lần. Trong khi đó, bộ chọn lớp có thể sử dụng nhiều lần.
Nên sử dụng id hay class?
Câu trả lời: Cố gắng sử dụng class càng nhiều càng tốt. Chỉ một số trường hợp đặc biệt mới nên dùng id
Lý do: id thường được dùng trong JavaScript. Tức là JavaScript dùng id để lấy ra các thẻ tương ứng
Bộ chọn con cháu
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ví dụ bộ chọn con cháu</title>
<style>
.article-content p {
color: #34495e;
line-height: 1.8;
margin-bottom: 15px;
}
.article-content .highlight {
background-color: #f9e79f;
padding: 5px;
border-radius: 3px;
}
</style>
</head>
<body>
<article class="article-content">
<h2>Giới thiệu về CSS</h2>
<p>CSS (Cascading Style Sheets) là ngôn ngữ dùng để mô tả giao diện của tài liệu HTML.</p>
<p>Nó <span class="highlight">cho phép kiểm soát màu sắc, phông chữ, bố cục</span> và nhiều thuộc tính khác của các trang web.</p>
<div>
<p>CSS có thể được áp dụng trực tiếp vào các thẻ HTML hoặc thông qua các lớp và ID.</p>
<p>Việc sử dụng bộ chọn con cháu giúp định dạng chính xác các phần tử trong một cấu trúc lồng ghép.</p>
</div>
</article>
</body>
</html>
-
Kết quả thực thi
-
Tổng kết: Sử dụng bộ chọn con cháu giới hạn khoảng chọn, thẻ nào trong thẻ div nào. Giới hạn khu vực logic riêng. Về quy chuẩn bố cục, độ lồng ghép phần tử thường không nên vượt quá 8 tầng, tối đa 256 tầng, nếu vượt quá bộ chọn sẽ không hiệu quả
Bộ chọn con trực tiếp
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ví dụ bộ chọn con trực tiếp</title>
<style>
.menu-item > a {
display: block;
padding: 10px 15px;
color: #2c3e50;
text-decoration: none;
border-bottom: 1px solid #ecf0f1;
}
.menu-item > a:hover {
background-color: #3498db;
color: white;
}
</style>
</head>
<body>
<nav>
- [Trang chủ](#home)
- [Giới thiệu](#about)
- [Dịch vụ](#services)
</li>
<li class="menu-item">
<a href="#products">Sản phẩm</a>
</li>
<li class="menu-item">
<a href="#contact">Liên hệ</a>
</li>
</ul>
</nav>
</body>
</html>
-
Kết quả thực thi
-
Tổng kết: Nếu không muốn chọn bất kỳ phần tử con cháu nào, mà muốn thu hẹp phạm vi chỉ chọn các phần tử con trực tiếp của một phần tử, hãy sử dụng bộ chọn phần tử con
-
Nhận biết Bộ chọn phổ quát mã
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ví dụ bộ chọn phổ quát</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f8f9fa;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.card {
background: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
padding: 20px;
margin-bottom: 20px;
}
.card h2 {
color: #2c3e50;
margin-bottom: 15px;
}
.card p {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<h2>Giới thiệu về bộ chọn phổ quát</h2>
<p>Bộ chọn phổ quát (*) được sử dụng để đặt kiểu cho tất cả các phần tử trên trang.</p>
<p>Nó rất hữu ích khi cần đặt lại kiểu mặc định của trình duyệt.</p>
</div>
<div class="card">
<h2>Ứng dụng thực tế</h2>
<p>Bộ chọn phổ quát giúp đảm bảo tính nhất quán trong toàn bộ trang web.</p>
<p>Nó có thể được kết hợp với các bộ chọn khác để tạo ra các quy tắc phức tạp.</p>
</div>
</div>
</body>
</html>
-
Kết quả thực thi
-
Tổng kết: Bộ chọn phổ quát là bộ chọn mạnh mẽ nhất, chúng ta có thể sử dụng đặc điểm của nó để giúp nhanh chóng重构样式 trong quá trình phát triển
Bộ chọn nhóm
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ví dụ bộ chọn nhóm</title>
<style>
h1, h2, h3 {
color: #2c3e50;
font-family: 'Arial', sans-serif;
}
p, span, li {
line-height: 1.6;
color: #34495e;
}
#header, #footer, .sidebar {
background-color: #ecf0f1;
padding: 15px;
}
.highlight, .important, .note {
padding: 10px;
margin: 10px 0;
border-left: 4px solid;
}
.highlight {
border-color: #f1c40f;
background-color: #fef9e7;
}
.important {
border-color: #e74c3c;
background-color: #fadbd8;
}
.note {
border-color: #3498db;
background-color: #ebf5fb;
}
</style>
</head>
<body>
<header id="header">
<h1>Đây là tiêu đề trang</h1>
<p>Đây là phần mô tả ngắn gọn về trang web.</p>
</header>
<div class="container">
<div class="sidebar">
<h3>Menu bên</h3>
- [Trang chủ](#home)
- [Giới thiệu](#about)
- [Liên hệ](#contact)
</div>
<main>
<h2>Tiêu đề chính</h2>
<p>Đây là nội dung chính của trang web.</p>
<div class="highlight">
<p>Đây là một thông tin cần được làm nổi bật.</p>
</div>
<div class="important">
<p>Đây là một thông tin quan trọng cần được chú ý.</p>
</div>
</main>
</div>
<footer id="footer">
<p>© 2023 Công ty của tôi. Tất cả quyền được bảo lưu.</p>
</footer>
</body>
</html>
-
Kết quả thực thi
-
Tổng kết: Khi cần thực hiện cùng một thao tác trên nhiều phần tử, chúng ta có thể chọn bộ chọn nhóm, thường được sử dụng trong bố cục trang
Bộ chọn giao
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ví dụ bộ chọn giao</title>
<style>
p {
color: #2c3e50;
font-size: 16px;
line-height: 1.6;
}
.special {
background-color: #f8f9fa;
border-left: 4px solid #3498db;
padding: 10px;
margin: 15px 0;
}
#unique {
font-weight: bold;
color: #e74c3c;
}
p.special {
border-radius: 4px;
}
p#unique {
text-align: center;
font-size: 20px;
}
</style>
</head>
<body>
<div class="container">
<p>Đây là một đoạn văn thông thường.</p>
<p class="special">Đây là một đoạn văn có lớp đặc biệt.</p>
<p id="unique">Đây là một đoạn văn có ID duy nhất.</p>
<p class="special" id="unique">Đây là một đoạn văn vừa có lớp vừa có ID.</p>
</div>
</body>
</html>
-
Kết quả thực thi
-
Tổng kết: Ứng dụng bộ chọn giao, trong đó cái đầu tiên phải là bộ chọn thẻ, cái thứ hai phải là bộ chọn lớp hoặc bộ chọn ID; giữa hai bộ chọn này không được có khoảng trắng. Tác động đến việc chồng lên các kiểu mẫu thông thường
Bộ chọn anh em liền kề
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ví dụ bộ chọn anh em liền kề</title>
<style>
.section {
margin-bottom: 20px;
}
.section-title {
font-size: 24px;
font-weight: bold;
color: #2c3e50;
padding: 10px;
background-color: #ecf0f1;
border-radius: 5px 5px 0 0;
}
.section-title + .section-content {
border: 1px solid #bdc3c7;
border-top: none;
padding: 15px;
border-radius: 0 0 5px 5px;
}
.section-content p {
margin-bottom: 10px;
}
.intro + .highlight {
background-color: #fff9c4;
border-left: 4px solid #fbc02d;
padding: 10px;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="section">
<h2 class="section-title">Giới thiệu về CSS</h2>
<div class="section-content">
<p class="intro">CSS là ngôn ngữ dùng để mô tả giao diện của tài liệu HTML.</p>
<p>Nó cho phép kiểm soát màu sắc, phông chữ, bố cục và nhiều thuộc tính khác.</p>
<div class="highlight">
<p>CSS giúp tách biệt nội dung và giao diện, giúp mã nguồn dễ bảo trì hơn.</p>
</div>
</div>
</div>
<div class="section">
<h2 class="section-title">Các loại bộ chọn</h2>
<div class="section-content">
<p>CSS có nhiều loại bộ chọn khác nhau để lựa chọn phần tử:</p>
- Bộ chọn thẻ
- Bộ chọn ID
- Bộ chọn lớp
- Bộ chọn con cháu
<p class="intro">Mỗi loại bộ chọn có ưu điểm và ứng dụng riêng.</p>
<div class="highlight">
<p>Sự hiểu biết về các bộ chọn giúp viết CSS hiệu quả hơn.</p>
</div>
</div>
</div>
</body>
</html>
-
Kết quả thực thi
-
Tổng kết: Ngay sau một phần tử khác, cả hai có cùng phần tử cha
Bộ chọn anh em chung
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ví dụ bộ chọn anh em chung</title>
<style>
.navigation {
background-color: #34495e;
padding: 10px 0;
}
.nav-item {
display: inline-block;
margin-right: 15px;
}
.nav-item a {
color: white;
text-decoration: none;
padding: 5px 10px;
border-radius: 4px;
}
.nav-item a:hover {
background-color: #2c3e50;
}
/* Áp dụng cho tất cả các thẻ <a> sau phần tử có class="nav-item" */
.nav-item ~ a {
color: #3498db;
font-weight: bold;
}
.main-content {
padding: 20px;
}
.main-content h1 {
color: #2c3e50;
margin-bottom: 20px;
}
.main-content p {
margin-bottom: 15px;
line-height: 1.6;
}
/* Áp dụng cho tất cả các thẻ <p> sau phần tử có id="intro" */
#intro ~ p {
text-indent: 20px;
}
</style>
</head>
<body>
<nav class="navigation">
<div class="nav-item"><a href="#home">Trang chủ</a></div>
<div class="nav-item"><a href="#about">Giới thiệu</a></div>
<div class="nav-item"><a href="#services">Dịch vụ</a></div>
<div class="nav-item"><a href="#contact">Liên hệ</a></div>
<a href="#sitemap">Bản đồ site</a>
</nav>
<div class="main-content">
<h1>Chào mừng đến với trang web của chúng tôi</h1>
<p id="intro">Đây là đoạn giới thiệu đầu tiên về nội dung trang web.</p>
<p>Đây là đoạn văn thứ hai, có thụt vào đầu dòng.</p>
<p>Đây là đoạn văn thứ ba, cũng có thụt vào đầu dòng.</p>
<h2>Tại sao chọn chúng tôi?</h2>
<p>Chúng tôi cung cấp các giải pháp công nghệ tiên tiến.</p>
<p>Đội ngũ của chúng tôi luôn sẵn sàng hỗ trợ bạn.</p>
</div>
</body>
</html>
-
Kết quả thực thi
-
Tổng kết: Giữa hai phần tử có phần tử khác, cả hai có cùng phần tử cha
Bộ chọn thuộc tính
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ví dụ bộ chọn thuộc tính</title>
<style>
/* Tất cả các phần tử có thuộc tính data-category sẽ có màu nền xanh nhạt */
[data-category] {
background-color: #e3f2fd;
padding: 10px;
margin: 5px 0;
border-radius: 4px;
}
/* Tất cả các phần tử có thuộc tính data-category với giá trị "frontend" sẽ có viền trái màu cam */
[data-category="frontend"] {
border-left: 4px solid #ff9800;
}
/* Tất cả các phần tử có thuộc tính data-category chứa giá trị "css" sẽ có chữ in đậm */
[data-category~="css"] {
font-weight: bold;
}
/* Tất cả các phần tử có thuộc tính data-info với giá trị bắt đầu bằng "beginner" sẽ có màu chữ xanh */
[data-info^="beginner"] {
color: #2196f3;
}
/* Tất cả các phần tử có thuộc tính data-info với giá trị kết thúc bằng "advanced" sẽ có màu chữ đỏ */
[data-info$="advanced"] {
color: #f44336;
}
/* Tất cả các phần tử có thuộc tính data-info chứa chuỗi "intermediate" sẽ có nền màu vàng nhạt */
[data-info*="intermediate"] {
background-color: #fffde7;
}
/* Tất cả các phần tử input có thuộc tính type="text" sẽ có viền màu xanh lá */
input[type="text"] {
border: 1px solid #4caf50;
padding: 8px;
}
/* Tất cả các phần tử input có thuộc tính required sẽ có nền màu hồng nhạt */
input[required] {
background-color: #fce4ec;
}
</style>
</head>
<body>
<h1>Các khóa học lập trình web</h1>
<div data-category="frontend" data-info="beginner">
<h2>HTML cơ bản</h2>
<p>Khóa học giới thiệu về HTML, ngôn ngữ đánh dấu siêu văn bản.</p>
</div>
<div data-category="frontend css" data-info="intermediate">
<h2>CSS nâng cao</h2>
<p>Khóa học đi sâu vào các kỹ thuật CSS hiện đại.</p>
</div>
<div data-category="frontend javascript" data-info="advanced">
<h2>JavaScript chuyên sâu</h2>
<p>Khóa học về JavaScript và các framework phổ biến.</p>
</div>
<form>
<h2>Đăng ký khóa học</h2>
<input type="text" placeholder="Họ và tên" required>
<input type="email" placeholder="Email" required>
<input type="submit" value="Gửi đăng ký">
</form>
</body>
</html>
-
Kết quả thực thi
-
Tổng kết: Bộ chọn thuộc tính là một loại bộ chọn đặc biệt, nó dựa trên thuộc tính và giá trị thuộc tính của phần tử để khớp. Cú pháp chung của chúng bao gồm ngoặc vuông
[], chứa tên thuộc tính, theo sau là điều kiện tùy chọn để khớp giá trị thuộc tính. Bộ chọn thuộc tính có thể được chia thành hai loại dựa trên cách khớp giá trị thuộc tính: Bộ chọn thuộc tính tồn tại và giá trị, và bộ chọn thuộc tính giá trị con chuỗi. -
Các ví dụ khác về bộ chọn thuộc tính
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ví dụ nâng cao về bộ chọn thuộc tính</title>
<style>
/* Tất cả các phần tử có thuộc tính title sẽ có chữ gạch chân */
[title] {
text-decoration: underline;
cursor: help;
}
/* Tất cả các thẻ a có thuộc tính target="_blank" sẽ có biểu tượng mới mở tab */
a[target="_blank"]::after {
content: " ↗";
color: #2196f3;
}
/* Tất cả các thẻ img có thuộc tính alt sẽ có viền màu xanh */
img[alt] {
border: 2px solid #2196f3;
}
/* Tất cả các thẻ video có thuộc tính controls sẽ có nền xám nhạt */
video[controls] {
background-color: #f5f5f5;
}
/* Tất cả các thẻ input có thuộc tính multiple sẽ có viền màu tím */
input[multiple] {
border: 1px solid #9c27b0;
}
/* Tất cả các thẻ button có thuộc tính disabled sẽ có màu xám */
button[disabled] {
background-color: #9e9e9e;
color: white;
cursor: not-allowed;
}
/* Tất cả các thẻ form có thuộc tính novalidate sẽ có viền đỏ */
form[novalidate] {
border: 1px solid #f44336;
padding: 10px;
}
/* Tất cả các thẻ td có thuộc tính colspan sẽ có nền màu vàng nhạt */
td[colspan] {
background-color: #fff9c4;
}
/* Tất cả các thẻ tr có thuộc tính hidden sẽ có màu chữ xám */
tr[hidden] {
color: #9e9e9e;
}
</style>
</head>
<body>
<h1>Ví dụ về bộ chọn thuộc tính nâng cao</h1>
<p title="Đây là một đoạn văn có thuộc tính title">Đoạn văn này có thuộc tính title.</p>
<a href="https://example.com" target="_blank">Link mở trong tab mới</a>
<a href="https://example.com">Link thông thường</a>
<video controls width="300">
<source src="movie.mp4" type="video/mp4">
Trình duyệt của bạn không hỗ trợ video.
</video>
<form novalidate>
<input type="text" placeholder="Họ và tên" required>
<input type="email" multiple placeholder="Email (nhiều email cách nhau bằng dấu phẩy)">
<button type="submit">Gửi</button>
</form>
| Hàng 1, Cột 1 | Hàng 1, Cột 2 (kết hợp 2 cột) |
|---|---|
| Hàng 2, Cột 1 | Hàng 2, Cột 2 | Hàng 2, Cột 3 |
</body>
</html>
Bộ chọn giả lớp
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ví dụ về bộ chọn giả lớp</title>
<style>
/* Trạng thái chưa được truy cập của liên kết */
a:link {
color: #3498db;
text-decoration: none;
}
/* Trạng thái đã được truy cập của liên kết */
a:visited {
color: #9b59b6;
}
/* Trạng thái khi di chuột qua liên kết */
a:hover {
color: #e74c3c;
text-decoration: underline;
}
/* Trạng thái khi nhấn vào liên kết */
a:active {
color: #f39c12;
}
/* Định dạng cho đoạn văn đầu tiên */
p:first-child {
font-weight: bold;
color: #2c3e50;
}
/* Định dạng cho đoạn văn cuối cùng */
p:last-child {
font-style: italic;
color: #7f8c8d;
}
/* Định dạng cho đoạn văn thứ hai */
p:nth-child(2) {
background-color: #f8f9fa;
padding: 10px;
border-left: 4px solid #3498db;
}
/* Định dạng cho các đoạn văn chẵn */
p:nth-child(even) {
background-color: #f1f2f6;
}
/* Định dạng cho các đoạn văn lẻ */
p:nth-child(odd) {
background-color: #ffffff;
}
/* Định dạng cho ô đầu tiên trong bảng */
td:first-child {
font-weight: bold;
background-color: #e8f4fc;
}
/* Định dạng cho ô khi di chuột qua */
td:hover {
background-color: #d4edda;
}
/* Định dạng cho ô được chọn */
td:active {
background-color: #cce5ff;
}
/* Định dạng cho nút khi được kích hoạt */
button:active {
transform: scale(0.98);
background-color: #2980b9;
color: white;
}
/* Định dạng cho input khi được focus */
input:focus {
border: 2px solid #3498db;
outline: none;
}
/* Định dạng cho input khi được kích hoạt */
input:active {
border-color: #e74c3c;
}
/* Định dạng cho ô khi được chọn */
input:checked + label {
color: #2ecc71;
font-weight: bold;
}
/* Định dạng cho ô chưa được chọn */
input:not(:checked) + label {
color: #7f8c8d;
}
</style>
</head>
<body>
<h1>Ví dụ về bộ chọn giả lớp</h1>
<p>Đây là đoạn văn đầu tiên trong trang.</p>
<p>Đây là đoạn văn thứ hai trong trang.</p>
<p>Đây là đoạn văn thứ ba trong trang.</p>
<p>Đây là đoạn văn cuối cùng trong trang.</p>
<h2>Liên kết</h2>
<p>
<a href="#home">Trang chủ</a> |
<a href="#about">Giới thiệu</a> |
<a href="#contact">Liên hệ</a>
</p>
<h2>Bảng dữ liệu</h2>
| Họ và tên | Email | Số điện thoại |
|---|---|---|
| Nguyễn Văn A | nguyena@example.com | 0123456789 |
| Trần Thị B | tranthib@example.com | 0987654321 |
<h2>Form nhập liệu</h2>
<form>
<input type="text" placeholder="Họ và tên">
<input type="email" placeholder="Email">
<button type="submit">Gửi</button>
</form>
<h2>Checkbox</h2>
<div>
<input type="checkbox" id="option1">
<label for="option1">Tùy chọn 1</label>
</div>
<div>
<input type="checkbox" id="option2">
<label for="option2">Tùy chọn 2</label>
</div>
</body>
</html>
-
Kết quả thực thi