CSS Selector

(10)
180 lượt xem
Share

CSS Selector được sử dụng để chọn các phần tử HTML (HTML element) dựa trên tên phần tử (element name), id, thuộc tính, ... . Selector có thể chọn đồng thời một hoặc nhiều phần tử khác nhau. Để tìm hiểu về CSS Selector, mời bạn đọc tham khảo bài viết dưới đây của eLib.VN

Mục lục nội dung

CSS Selector

1. Bộ chọn CSS phần tử

Bộ chọn CSS phần tử chọn phần tử HTML theo tên. Ví dụ đoạn CSS dưới đây sẽ ảnh hưởng đến nội dung trong phần tử p.

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<style>
		#para1 {
		    text-align: center;
		    color: blue;
		}
	</style>
</head>

<body>
	<p id="para1">Hello CSS</p>
	<p>This paragraph will not be affected.</p>
</body>

</html>

Output:

2. Bộ chọn CSS id

Bộ chọn id sẽ chọn thuộc tính id của một phần tử HTML để chọn một phần tử cụ thể. Một id luôn luôn là duy nhất trong trang vì vậy nó được chọn để chọn một phần tử độc nhất.

Nó được viết với ký tự thăng (#), tiếp theo là id của phần tử.

Dưới đây là ví dụ với id "para1".

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#para1 {
    text-align: center;
    color: blue;
}
</style>
</head>
<body>
  <p id="para1">Hello CSS</p>
  <p>This paragraph will not be affected.</p>
</body>
</html>
Output:

3. Bộ chọn CSS class

Bộ chọn class chọn các phần tử HTML với một thuộc tính class cụ thể.

Lưu ý: Tên lớp không được bắt đầu với một số
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<style>
		.center {
		    text-align: center;
		    color: blue;
		}
	</style>
</head>

<body>
	<h1 class="center">This heading is blue and center-aligned.</h1>
	<p class="center">This paragraph is blue and center-aligned.</p>
</body>

</html>

Output:

Bộ chọn CSS class cho một phần tử cụ thể

Nếu bạn muốn chỉ định rằng chỉ có một phần tử HTML cụ thể bị ảnh hưởng thì bạn nên sử dụng tên phần tử với bộ chọn lớp.

Ví dụ 2:

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<style>
		p.center {
		    text-align: center;
		    color: blue;
		}
	</style>
</head>

<body>
	<h1 class="center">This heading is not affected</h1>
	<p class="center">This paragraph is blue and center-aligned.</p>
</body>

</html>

Output:

4. Bộ chọn CSS toàn thể

Bộ chọn toàn thể được sử dụng làm ký tự đại diện. Nó chọn tất cả các phần tử trên các trang. Dấu sao (*) đại diện cho tất cả các phần tử.

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<style>
		* {
		    color: green;
		    font-size: 20px;
		}
	</style>
</head>

<body>
	<h2>This is heading</h2>
	<p>This style will be applied on every paragraph.</p>
	<p id="para1">Me too!</p>
	<p>And me!</p>
</body>

</html>

Output:

5. Bộ chọn CSS nhóm

Bộ chọn nhóm được sử dụng để chọn tất cả các phần tử có cùng định nghĩa kiểu cách.

Bộ chọn nhóm được sử dụng để giảm thiểu mã. Dấu phẩy được sử dụng để tách từng bộ chọn trong nhóm.

Hãy xem mã CSS mà không sử dụng bộ chọn nhóm.

h1 {
    text-align: center;
    color: blue;
}

h2 {
    text-align: center;
    color: blue;
}

p {
    text-align: center;
    color: blue;
}

Như bạn thấy, bạn cần xác định thuộc tính CSS cho tất cả các phần tử. Nó có thể được nhóm lại theo cách sau:

h1,h2,p {
    text-align: center;
    color: blue;
}

Hãy xem ví dụ đầy đủ về bộ chọn nhóm CSS.

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<style>
		h1,h2,p {
		    text-align: center;
		    color: blue;
		}
	</style>
</head>

<body>
	<h1>Hello CSS</h1>
	<h2>This is a heading</h2>
	<p>This is a paragraph.</p>
</body>

</html>

Output:

Trên đây là bài viết của eLib.VN về CSS Selector. Chúng tôi hy vọng bài viết hữu ích cho bạn đọc đang có nhu cầu tìm hiểu về ngôn ngữ CSS. Chúc các bạn thành công!

(10)
180 lượt xem
Share
Ngày:09/11/2020 Chia sẻ bởi:Nhi
TẢI VỀ XEM ONLINE

CÓ THỂ BẠN QUAN TÂM