การทำความเข้าใจตัวเลือก CSS และการประกาศ

ตัวเลือก CSS ใช้เพื่อเลือกองค์ประกอบ HTML โดยจับคู่แต่ละองค์ประกอบของรูปแบบที่กำหนด เรากำหนดรูปแบบโดยการประกาศคุณสมบัติและค่าภายในตัวเลือก

ไวยากรณ์

ไวยากรณ์สำหรับการประกาศรูปแบบมีดังนี้ −

Selector {
property: value; }

CSS มีตัวเลือกอย่างง่าย ตัวเลือกแอตทริบิวต์ คลาสหลอก องค์ประกอบหลอก และการรวมกันของตัวเลือกผ่านตัวรวมมาตรฐาน ตารางต่อไปนี้แสดงรายการตัวเลือกบางส่วน -

ตัวเลือก	ประเภทของตัวเลือก	คำอธิบาย
*	ตัวเลือกสากล	จับคู่องค์ประกอบทั้งหมด
จ	ตัวเลือกประเภท	จับคู่องค์ประกอบทั้งหมดของประเภท e
e1e2	ตัวเลือกลูกหลาน	จับคู่องค์ประกอบ e2 ใดๆ ที่เป็นลูกหลานขององค์ประกอบ e1
e1>e2	ตัวเลือกลูก	จับคู่องค์ประกอบ e2 ที่เป็นลูกขององค์ประกอบ e1
e[bar="demo"]	ตัวเลือกแอตทริบิวต์	จับคู่องค์ประกอบ e ใดๆ ที่มีค่าแอตทริบิวต์ "bar" เท่ากับ "demo" ทุกประการ
#id	ตัวเลือก ID	จับคู่องค์ประกอบที่มี ID เท่ากับ "id"

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงตัวเลือก CSS -

<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
   background-color: lightgreen;
   color: white;
   text-decoration: overline black;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<p>This is our demo text. Only the first line will have a different style. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p>
</body>
</html>

ผลลัพธ์

สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -

การทำความเข้าใจตัวเลือก CSS และการประกาศ

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
   background-color: lightgreen;
   color: white;
   text-decoration: overline red;
}
span {
   font-size: 1.4em;
}
#demo {
   box-shadow: inset 0 0 20px orange;
}
</style>
</head>
<body>
<h2>Student Details</h2>
<p><span>Student</span>details would be mentioned here. <span id="demo">Student Marks</span> includes the score of students in the final semester held July 2018. With that the ranks are also displayed.</p>
</body>
</html>

ผลลัพธ์

สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -

การทำความเข้าใจตัวเลือก CSS และการประกาศ