[ Better ] [ CSS ] Tổng hợp vùng chọn CSS năm 2024
Mục lục
Tổng hợp vùng chọn CSS chỉ lấy thẻ cha không lấy child
Tổng hợp vùng chọn CSS để chỉ lấy thẻ cha mà không lấy các thẻ con trong CSS, bạn có thể sử dụng các selector và pseudo-class phù hợp.
Tuy nhiên, CSS không hỗ trợ trực tiếp việc chọn thẻ cha mà không chọn các thẻ con, nhưng bạn có thể sử dụng một số kỹ thuật để đạt được điều này.
Các hình thức của css
Bên dưới là một số hình thức bạn có thể tạo css cho vùng chọn nhớ để ý đến độ ưu tiên css:
!important > style inline > style > Link
Style thẳng trong tag
Style inline
Thuộc tính important nếu không có dụng thì mới chơi đến thuộc tính này
Các cách lấy vùng chọn
Sử dụng :not()
Bạn có thể sử dụng pseudo-class :not() để loại bỏ các thẻ con khỏi việc áp dụng style:
.parent-class *:not(.child-class) {
/* Style áp dụng cho thẻ cha */
}
Sử dụng > Selector
Nếu bạn chỉ muốn chọn thẻ cha trực tiếp mà không chọn các thẻ con, bạn có thể sử dụng selector >:
.parent-class > * {
/* Style áp dụng cho các thẻ con trực tiếp của thẻ cha */
}
Ví dụ minh họa
Giả sử bạn có cấu trúc HTML như sau:
<div class="parent">
<div class="child">
Child 1
</div>
<div class="child">
Child 2
</div>
</div>
Để chỉ áp dụng style cho thẻ cha mà không ảnh hưởng đến các thẻ con, bạn có thể làm như sau:
.parent {
background-color: lightblue; /* Style cho thẻ cha */
}
.parent .child {
background-color: transparent; /* Reset style cho thẻ con nếu cần */
}
Nếu bạn chỉ muốn style các thẻ cha khi không có các thẻ con:
.parent {
background-color: lightblue;
}
.parent .child {
background-color: transparent;
}
/* Đảm bảo thẻ cha không có style con */
.parent *:not(.child) {
background-color: lightblue;
}
JavaScript (Nếu cần)
Nếu bạn cần kiểm soát nhiều hơn, có thể sử dụng JavaScript để áp dụng style chỉ cho các thẻ cha:
document.querySelectorAll('.parent').forEach(parent => {
parent.style.backgroundColor = 'lightblue';
parent.querySelectorAll('.child').forEach(child => {
child.style.backgroundColor = 'transparent';
});
});
Những phương pháp trên giúp bạn áp dụng style cho thẻ cha mà không ảnh hưởng đến các thẻ con một cách linh hoạt và hiệu quả.
Cho tôi một bảng query css các selection thông dụng
Dưới đây là một bảng tổng hợp các CSS selectors thông dụng cùng với mô tả và ví dụ minh họa cho từng loại:
| Selector | Mô tả | Ví dụ | Kết quả |
|---|---|---|---|
*
| Chọn tất cả các phần tử |
* { color: red; }
| Tất cả các phần tử có màu chữ đỏ |
element
|
Chọn tất cả các phần tử
<element>
|
p { color: blue; }
| Tất cả các đoạn văn có màu chữ xanh |
.class
| Chọn tất cả các phần tử có class cụ thể |
.btn { background: yellow; }
| Tất cả các phần tử có class “btn” có nền màu vàng |
#id
| Chọn phần tử có id cụ thể |
#header { font-size: 24px; }
| Phần tử có id “header” có kích thước chữ là 24px |
element, element
|
Chọn tất cả các phần tử
<element>
và
<element>
|
h1, h2 { margin: 0; }
| Tất cả các tiêu đề h1 và h2 không có khoảng cách ngoài |
element element
|
Chọn tất cả các phần tử
<element>
nằm bên trong
<element>
khác
|
div p { color: green; }
| Tất cả các đoạn văn bên trong một thẻ div có màu chữ xanh |
element > element
|
Chọn tất cả các phần tử
<element>
là con trực tiếp của
<element>
khác
|
ul > li { list-style: none; }
| Tất cả các thẻ li là con trực tiếp của thẻ ul không có ký hiệu đầu dòng |
element + element
|
Chọn phần tử
<element>
ngay sau phần tử
<element>
khác
|
h1 + p { margin-top: 0; }
| Đoạn văn ngay sau thẻ h1 không có khoảng cách trên |
element ~ element
|
Chọn tất cả các phần tử
<element>
sau phần tử
<element>
khác trong cùng một cha
|
h1 ~ p { color: gray; }
| Tất cả các đoạn văn sau thẻ h1 trong cùng một cha có màu chữ xám |
[attribute]
| Chọn tất cả các phần tử có thuộc tính cụ thể |
[title] { font-weight: bold; }
| Tất cả các phần tử có thuộc tính title có chữ đậm |
[attribute=value]
| Chọn tất cả các phần tử có thuộc tính với giá trị cụ thể |
input[type="text"] { border: 1px solid #000; }
| Tất cả các thẻ input có type là “text” có viền đen |
:hover
| Chọn phần tử khi người dùng đưa chuột vào |
a:hover { color: red; }
| Các liên kết đổi màu đỏ khi hover |
:nth-child(n)
| Chọn phần tử con thứ n của cha nó |
li:nth-child(2) { color: blue; }
| Phần tử con thứ 2 của tất cả các thẻ li có màu xanh |
:not(selector)
| Chọn tất cả các phần tử không khớp với selector |
input:not([type="submit"]) { border: 1px solid #ccc; }
| Tất cả các thẻ input không có type là “submit” có viền xám |
Ví dụ HTML
<!DOCTYPE html>
<html>
<head>
<style>
* { color: red; }
p { color: blue; }
.btn { background: yellow; }
#header { font-size: 24px; }
h1, h2 { margin: 0; }
div p { color: green; }
ul > li { list-style: none; }
h1 + p { margin-top: 0; }
h1 ~ p { color: gray; }
[title] { font-weight: bold; }
input[type="text"] { border: 1px solid #000; }
a:hover { color: red; }
li:nth-child(2) { color: blue; }
input:not([type="submit"]) { border: 1px solid #ccc; }
</style>
</head>
<body>
<div id="header">Header</div>
<h1>Title</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<a href="#">Link</a>
<button class="btn">Button</button>
<input type="text" title="text input">
<input type="submit" value="Submit">
</body>
</html>
Bảng trên bao gồm các CSS selectors phổ biến mà bạn có thể sử dụng trong các dự án web của mình.
Giờ hãy cho tôi 1 bảng độ ưu tiên
Dưới đây là bảng độ ưu tiên của các CSS selectors, giúp bạn hiểu rõ hơn về mức độ ưu tiên khi nhiều selectors cùng áp dụng cho một phần tử:
| Selector | Độ ưu tiên |
|---|---|
| Inline styles | 1000 |
#id
| 100 |
.class
,
pseudo-class (:hover, :focus)
,
attribute selector
| 10 |
element
,
pseudo-element (::before, ::after)
| 1 |
Universal selector (
*
), combinators (
+
,
>
,
~
,
), negation pseudo-class (
:not()
)
| 0 |
Quy tắc tính độ ưu tiên
- Inline styles: Các style được áp dụng trực tiếp trong HTML thông qua thuộc tính style có độ ưu tiên cao nhất.
Ví dụ:This is a paragraph.
- ID selectors: Các selector sử dụng ID có độ ưu tiên cao thứ hai.
Ví dụ:#header { color: blue; } - Class selectors, pseudo-class, attribute selectors: Các selector sử dụng class, pseudo-class hoặc attribute có độ ưu tiên cao thứ ba.
Ví dụ:.btn { background: yellow; } a:hover { color: green; } [type="text"] { border: 1px solid #000; } - Element selectors, pseudo-element: Các selector sử dụng tên phần tử hoặc pseudo-element có độ ưu tiên thấp nhất.
Ví dụ:p { color: blue; } p::first-line { font-weight: bold; } - Universal selectors, combinators, negation pseudo-class: Các selector này không làm tăng độ ưu tiên mà chỉ bổ sung điều kiện cho các selector khác.
Inline styles: Các style được áp dụng trực tiếp trong HTML thông qua thuộc tính style có độ ưu tiên cao nhất.
Ví dụ:
<p style="color: red;">This is a paragraph.</p>
ID selectors: Các selector sử dụng ID có độ ưu tiên cao thứ hai.
Ví dụ:
#header {
color: blue;
}
Class selectors, pseudo-class, attribute selectors: Các selector sử dụng class, pseudo-class hoặc attribute có độ ưu tiên cao thứ ba.
Ví dụ:
.btn {
background: yellow;
}
a:hover {
color: green;
}
[type="text"] {
border: 1px solid #000;
}
Element selectors, pseudo-element: Các selector sử dụng tên phần tử hoặc pseudo-element có độ ưu tiên thấp nhất.
Ví dụ:
p {
color: blue;
}
p::first-line {
font-weight: bold;
}
Universal selectors, combinators, negation pseudo-class: Các selector này không làm tăng độ ưu tiên mà chỉ bổ sung điều kiện cho các selector khác.
Cách tính tổng độ ưu tiên
Khi tính tổng độ ưu tiên, bạn cần cộng các giá trị tương ứng của từng phần trong selector:
- Inline styles: 1000
- ID selectors: 100 mỗi ID
- Class, pseudo-class, attribute selectors: 10 mỗi cái
- Element selectors, pseudo-element: 1 mỗi cái
Ví dụ tính độ ưu tiên
- Inline style:
Độ ưu tiên: 1000This is a paragraph.
- Độ ưu tiên: 1000
- ID selector:
#header { color: blue; }Độ ưu tiên: 100 - Độ ưu tiên: 100
- Class selector:
.btn { background: yellow; }Độ ưu tiên: 10 - Độ ưu tiên: 10
- Element selector:
p { color: blue; }Độ ưu tiên: 1 - Độ ưu tiên: 1
- Kết hợp nhiều selector:
div#main.content p.intro { color: green; }div (element): 1#main (ID): 100.content (class): 10p (element): 1.intro (class): 10Tổng độ ưu tiên: 1 + 100 + 10 + 1 + 10 = 122 - div (element): 1
- #main (ID): 100
- .content (class): 10
- p (element): 1
- .intro (class): 10
- Tổng độ ưu tiên: 1 + 100 + 10 + 1 + 10 = 122
Inline style:
<p style="color: red;">This is a paragraph.</p>
- Độ ưu tiên: 1000
ID selector:
#header {
color: blue;
}
- Độ ưu tiên: 100
Class selector:
.btn {
background: yellow;
}
- Độ ưu tiên: 10
Element selector:
p {
color: blue;
}
- Độ ưu tiên: 1
Kết hợp nhiều selector:
div#main.content p.intro {
color: green;
}
- div (element): 1
- #main (ID): 100
- .content (class): 10
- p (element): 1
- .intro (class): 10
- Tổng độ ưu tiên: 1 + 100 + 10 + 1 + 10 = 122
Hiểu rõ độ ưu tiên của các CSS selectors sẽ giúp bạn quản lý và viết CSS hiệu quả hơn, tránh các vấn đề liên quan đến xung đột style.
#Mtips5s #Contact
Fanpage: https://www.facebook.com/mtipscoder
Group trao đổi, chia sẻ: https://www.facebook.com/groups/mtipscoder
Website: https://mtips5s.com
Youtube: https://mtips5s.com
Twitter(X): @takagiks99
Instagram: @khuongkara
Threads: @khuongkara
Google Maps: @khuongkara
#Base Code #Souce Code
Bộ công cụ My Self: @tools.mtips5s.com
Github: @github
Npm: @npm
Docker: @docker
Chúc các bạn thành công!
Leave A Comment