CSS ลูกเล่นตัวเลือก

CSS ลูกเล่นตัวเลือก

ตัวเลือกประเภท CSS ที่เกิดขึ้นบ่อยที่สุดคือตัวเลือกประเภทองค์ประกอบ (element selector). ดังนั้น องค์ประกอบของเอกสารนั้นเป็นตัวเลือกประเภทพื้นฐาน

หากตั้งรูปแบบสไตล์สำหรับ HTML ตัวเลือกประเภทจะเป็นองค์ประกอบ HTML บางตัว เช่น p, h1, em, a หรือแม้กระทั่ง html ด้วยตัวเอง

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

ลองด้วยตัวเอง

สามารถเปลี่ยนรูปแบบสไตล์จากองค์ประกอบหนึ่งไปยังองค์ประกอบอื่นได้

หากคุณตัดสินใจจะตั้งรูปแบบสไตล์สำหรับข้อความประโยคดังกล่าว (ไม่ใช่องค์ประกอบ h1) ให้สีเทา พวกเราจะเปลี่ยนตัวเลือก h1 ไปเป็น p:

html {color:black;}
p {color:gray;}
h2 {color:silver;}

ลองด้วยตัวเอง

ตัวเลือกประเภท

ในมาตราฐาน W3C ตัวเลือกประเภทองค์ประกอบยังเรียกว่าตัวเลือกประเภท (type selector) ด้วย

“เลือกตัวเลือกประเภทเลือกตัวเลือกชื่อประเภทองค์ประกอบของภาษาเอกสาร และเลือกตัวเลือกประเภทตรงกับแต่ละตัวอย่างของประเภทองค์ประกอบในต้นไม้เอกสาร”

กฎการตรวจสอบนี้ตรงกับองค์ประกอบ h1 ทั้งหมดในต้นไม้เอกสาร：

h1 {font-family: sans-serif;}

ดังนั้น พวกเราก็สามารถตั้งรูปแบบสไตล์สำหรับองค์ประกอบของหนังสือเอกสาร XML ได้

XML หนังสือเอกสาร：

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="note.css"?>
<note>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>

เอกสาร CSS：

note
  {
  font-family:Verdana, Arial;
  margin-left:30px;
  }
to
  {
  font-size:28px;
  display: block;
  }
from
  {
  font-size:28px;
  display: block;
  }
heading
  {
  color: red;
  font-size:60px;
  display: block;
  }
body
  {
  color: blue;
  font-size:35px;
  display: block;
  }

ดูผลลัพธ์

ผ่านตัวอย่างด้านบนคุณสามารถเห็นได้ว่า ลูกเล่นตัวเลือก CSS (ลูกเล่นประเภท) สามารถตั้งสไตล์ขององค์ประกอบในเอกสาร XML

หากคุณต้องการข้อมูลเพิ่มเติมเกี่ยวกับการเพิ่มสไตล์ในเอกสาร XML โปรดเข้าเว็บไซต์ CodeW3C อบรม XML。