CSS Selector
Trong bài này chúng ta sẽ tìm hiểu về CSS Selector là gì? Cách khai báo và sử dụng CSS Selector
CSS selector là gì?
CSS selector là phần đầu tiên trong cú pháp khai báo luật CSS, sử dụng để chọn ra danh sách một hoặc nhiều phần tử muốn áp dụng luật CSS.
Chúng ta có thể chia CSS selector thành 5 loại chính:
Simple selectors: chọn phần tử dựa trên tên thẻ, id, class
Combinator selectors: chọn phần tử dựa vào mối quan hệ giữa các phần tử với nhau
Pseudo-class selectors: chọn phần tử dựa trên trạng thái
Pseudo-elements selectors: chọn và style các phần tử giả của phần tử gốc
Attribute selectors: chọn phần tử dựa trên thuộc tính HTML
Cách khai báo selector
.class1: chọn tất cả phần tử chứaclass1.class1.class2: chọn tất cả phần tử chứa cảclass1vàclass2.class1 .class2: chọn tất cả phần tử chứaclass2và phần tử đó nằm trong phần tử chứaclass1#id1: chọn phần tử đầu tiên chứaid1*: chọn tất cả phần tửp: chọn tất cả phần tử thẻp.class1,.class2: chọn tất cả phần tử chứaclass1và tất cả phần tử chứaclass2.class1 > .class2: chọn phần tử chứaclass2đầu tiên và phần tử đó nằm trongclass1.class1:hover: css xảy ra khi phần tử chứaclass1được rê chuột vàoimg[alt]: chọn tất cả các thẻimgchứa thuộc tínhalt
Xem thêm: https://www.w3schools.com/cssref/css_selectors.asp
Thứ tự ưu tiên của selector
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
color: red; /* Set text color to red */
}
div h2 {
color: blue;
}
</style>
</head>
<body>
<div>
<h2>My Heading</h2>
</div>
<!-- These paragraphs will be red -->
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the output.</p>
</body>
</html>Thẻ <h2> sẽ có màu blue vì khai báo rõ ràng hơn
Last updated