CSS ตัวเลือก

CSS ตัวเลือก

เลือกเลขซีเอสเอสใช้สำหรับ "หา" (หรือเลือก) องค์ประกอบ HTML ที่ต้องการตั้งรูปแบบ

เราสามารถแบ่งเลือกเลขซีเอสเอสเป็นห้าประเภท:

นี่หน้าจะเผยแพร่ประเด็นที่ง่ายที่สุดของเลือกเลขซีเอสเอส

CSS Element Selector

เลือกตัวที่มีชื่อองค์ประกอบตามชื่อองค์ประกอบ HTML

ตัวอย่าง

ที่นี้ ทุกองค์ประกอบ <p> บนหน้าเว็บจะมีการจัดลำดับของข้อความที่กลาง และมีสีขาวน้ำเงิน

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

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

CSS กลุ่มเลือกตัว id

เลือกตัว id ใช้ตัวเลือก id ขององค์ประกอบ HTML

id ขององค์ประกอบในหน้าเว็บเป็นเดียวของแค่ตัวเดียว ดังนั้นเลือกตัว id ใช้เพื่อเลือกองค์ประกอบเดียวโดยเฉพาะ!

ถ้าต้องการเลือกองค์ประกอบที่มี id พิเศษ ให้เขียนตัวอุปกรณ์ (＃) ตามด้วย id ขององค์ประกอบ

ตัวอย่าง

กฎ CSS นี้จะถูกใช้บนองค์ประกอบ HTML ที่มี id="para1":

#para1 {
  text-align: center;
  color: red;
}

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

ปรับปรุง:ชื่อ id ไม่สามารถเริ่มด้วยตัวเลขได้

CSS กลุ่มเลือกตัวชั้น

เลือกตัวที่มีชื่อชั้นเฉพาะขององค์ประกอบ HTML

ถ้าต้องการเลือกองค์ประกอบที่มี class พิเศษ ให้เขียนตัวอุปกรณ์ (.) ตามด้วยชื่อชั้น

ตัวอย่าง

ในตัวอย่างนี้ ทุกองค์ประกอบ HTML ที่มี class="center" จะมีสีแดงและจัดลำดับของข้อความที่กลาง

.center {
  text-align: center;
  color: red;
}

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

คุณยังสามารถกำหนดให้แค่องค์ประกอบ HTML พิเศษนี้ที่จะได้รับผลของชั้น

ตัวอย่าง

ในตัวอย่างนี้ เพียงแค่ <p> ที่มี class="center" จะมีการจัดลำดับของข้อความที่กลาง

p.center {
  text-align: center;
  color: red;
}

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

องค์ประกอบ HTML ก็สามารถมีชั้นหลายตัวได้

ตัวอย่าง

ในตัวอย่างนี้ <p> จะมีการกำหนดสไตล์ตาม class="center" และ class="large":

<p class="center large">บทความนี้มีชั้นสองตัว。</p>

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

ปรับปรุง:ชื่อชั้นไม่สามารถเริ่มด้วยตัวเลขได้!

CSS กลุ่มเลือกตัวทั่วไป

เลือกตัวทั้งหมดที่มีองค์ประกอบ HTML บนหน้าเว็บโดยใช้เลือกตัวทั่วไป (*)

ตัวอย่าง

กฎ CSS ใต้นี้จะทำให้มีผลบนทุกองค์ประกอบ HTML บนหน้าเว็บ:

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

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

CSS กลุ่มเลือกตัว

เลือกตัวที่มีการกำหนดสไตล์เดียวกันโดยใช้เลือกตัวที่มีกลุ่ม

ดูรหัส CSS ใต้นี้ (h1, h2 และ p มีการกำหนดสไตล์เดียวกัน):

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

ดีที่จะกลุ่มตัวเลือกเพื่อลดรหัสที่ใช้ได้มากที่สุด

ถ้าต้องการกลุ่มตัวเลือก ให้ใช้คำตัดของเพื่อแยกตัวเลือกแต่ละตัว

ตัวอย่าง

ในตัวอย่างนี้，เราจะกลุ่มตัวเลือกที่กล่าวมาข้างต้นด้วยตัวจำกัด:

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

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

เลือกตัวทั้งหมดที่เป็น CSS ไซล์เล็กน้อย

เลือกตัว ตัวอย่าง การอธิบายตัวอย่าง
.class .intro เลือกทุกองค์ประกอบที่มี class="intro"。
#id #firstname เลือก element ที่ id="firstname"。
* * เลือกทุก element。
element p เลือกทุก element <p>。
element,element,.. div, p เลือกทุก element <div> และทุก element <p>。

การอ่านเพิ่มเติม

หนังสือเสริม:CSS Element Selector

หนังสือเสริม:CSS Selector Grouping

หนังสือเสริม:CSS Class Selector Detailed

หนังสือเสริม:CSS ID Selector Detailed

หนังสือเสริม:CSS Attribute Selector Detailed

หนังสือเสริม:CSS Descendant Selector

หนังสือเสริม:CSS Child Element Selector

หนังสือเสริม:CSS Adjacent Sibling Selector