การกลุ่มตัวเลือก selector

การกลุ่ม selector

จงเสนอว่าต้องการให้ element h2 และ parาเก้นมีสีดำน้ำเงิน ในการทำให้เกิดขึ้นได้ง่ายที่สุดคือใช้การประกาศดังนี้

h2, p {color:gray;}

จะจัด h2 และ selector p ที่ด้านซ้ายของกฎ แล้วใช้คำนำวาก , เพื่อจัดทำกฎ ซึ่งสไตล์ด้านขวา (color:gray;) จะถูกใช้สำหรับองค์ประกอบที่ถูกอ้างโดย selector ทั้งสองนี้ จุดของ , บอกให้บราวเซอร์ว่ากฎนี้มี selector สองตัวแยกกัน หากไม่มีคำนำวาก , ความหมายของกฎจะต่างออกไปเต็มที่ ดู selector หลังหลังทางด้านล่าง

คุณสามารถจำแนกกลุ่มเลือกเลยที่จะต้องการ ไม่มีข้อจำกัดใดๆ

เช่น，หากคุณต้องการที่จะแสดงองค์ประกอบหลายองค์ประกอบเป็นสีเทา คุณสามารถใช้กฎเช่นดังนี้

body, h2, p, table, th, td, pre, strong, em {color:gray;}

คำเตือน：ด้วยการจำแนกกลุ่ม ผู้สร้างสรรค์สามารถ

กลุ่มกฎสองกลุ่มด้านล่างนี้จะได้ผลลัพธ์เดียวกัน แต่สามารถเห็นได้ชัดเจนว่าเรื่องที่เขียนมาง่ายขึ้น

/* no grouping */
h1 {color:blue;}
h2 {color:blue;}
h3 {color:blue;}
h4 {color:blue;}
h5 {color:blue;}
h6 {color:blue;}
/* grouping */
h1, h2, h3, h4, h5, h6 {color:blue;}

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

การจำแนกกลุ่มให้มีทางเลือกที่น่าสนใจมากมาย。เช่น，ทั้งหมดของกลุ่มกฎที่แสดงในตัวอย่างดังกล่าวนั้นเป็นสิ่งที่เหมือนกัน แต่แต่ละกลุ่มมีการแสดงวิธีการจำแนกกฎเลือกและการกำหนดกฎมากกว่า

/* group 1 */
h1 {color:silver; background:white;}
h2 {color:silver; background:gray;}
h3 {color:white; background:gray;}
h4 {color:silver; background:white;}
b {color:gray; background:white;}
/* group 2 */
h1, h2, h4 {color:silver;}
h2, h3 {background:gray;}
h1, h4, b {background:white;}
h3 {color:white;}
b {color:gray;}
/* group 3 */
h1, h4 {color:silver; background:white;}
h2 {color:silver;}
h3 {color:white;}
h2, h3 {background:gray;}
b {color:gray; background:white;}

เด็ดขาดทดสอบด้วยตัวเอง：

โปรดจำไว้ว่า ในกลุ่ม 3 ได้ใช้คำว่า 'การรวมกลุ่มการระบุ' ซึ่งเราจะมีโอกาสเรียกเตือนในตอนหลัง

selector วางดินแดน

CSS2 ได้นำเสนอ selector ที่ง่ายที่จะใช้ขึ้นมาแล้ว - selector วางดินแดน (universal selector) ที่แสดงด้วยดาวหรือเหล่านี้ (*). selector นี้สามารถทำงานกับในทุก element ซึ่งคล้ายกับตัวอย่าง

เช่น กฎต่อไปนี้จะทำให้ทุก element ในเอกสารมีสีแดง

* {color:red;}

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

การระบุนี้เหมือนกับการระบุกลุ่มเลือกตัวแทนที่แสดงความหมายของทุก element ในเอกสาร ด้วย selector วางดินแดนที่สามารถกำหนดค่าตัวแปร color ให้กับทุก element ในเอกสารด้วยการกดทางติดตามด้วยตัวอย่าง (ด้วยดาวหรือเหล่านี้)

การรวมกลุ่มการระบุ

เราสามารถกำหนดการรวมกลุ่มของเลือกตัวแทนและการระบุได้

หากคุณต้องการให้ทุก element ที่มี class ว่า h1 มีพื้นหลังสีแดงและแสดงข้อความด้วย font Verdana สูง 28 พิกเซลในสีน้ำเงิน คุณสามารถเขียนสไตล์ตามนี้:

h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}

แต่วิธีนี้ไม่มีประสิทธิภาพเท่าไหร่นัก โดยเฉพาะเมื่อเราต้องทำรายการสร้างบันทึกของสไตล์สำหรับองค์ประกอบที่มีสไตล์หลายราย ข้างหลังนี้ เราสามารถกำหนดการรวมกลุ่มของการระบุได้:

h1 {font: 28px Verdana; color: white; background: black;}

นี่มีผลลัพธ์ที่เหมือนกันกับ 3 บรรทัดตารางสไตล์ข้างหน้า

โปรดจำไว้ว่า การเข้ากลุ่มการระบุ ต้องใช้สัญญาณจุดขึ้นที่แยกข้อความที่สุดของการระบุ นี่มีความสำคัญมาก การตรวจสอบข้อมูลจะละเลยหลักฐานช่องว่างในตารางสไตล์ โดยเท่าไหร่ที่มีสัญญาณจุดขึ้นแล้ว ก็สามารถใช้รูปแบบตามนี้ได้โดยไม่มีความกังวล:

h1 {
  font: 28px Verdana;
  color: blue;
  background: red;
  }

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

แล้ว สไตล์ของการเขียนที่ดังกล่าวนั้นมีความเข้าใจง่ายไหมเลย

แต่ถ้าละเลยตัวจุดขึ้นสองตัวที่แยกข้อความ ผู้ตรวจสอบข้อมูลจะอ่านตารางสไตล์ตามนี้:

h1 {
  font: 28px Verdana;
  color: blue background: red;
  }

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

เพราะ background ไม่ใช่ค่าที่ถูกต้องสำหรับ color และเนื่องจากสามารถกำหนดคำที่แสดงเชิงนิยามเพียงคำเดียวสำหรับ color และดังนั้นผู้ตรวจสอบข้อมูลจะละเลยคำเรียกใช้ color นี้ทั้งหมด (รวมถึง background: black ด้วย) ซึ่งหมายความว่าหัวข้อ h1 จะแสดงเพียงสีน้ำเงินโดยไม่มีพื้นหลังสีแดง แต่มีแนวโน้มที่จะไม่ได้สีน้ำเงินสำหรับหัวข้อ h1 แล้ว ซึ่งหัวข้อเหล่านี้จะแสดงเพียงสีเริ่มต้น (ซึ่งทั่วไปแล้วเป็นสีดำ) และไม่มีสีพื้นหลังอะไรเลย การกำหนด font: 28px Verdana ยังคงทำงานอย่างถูกต้องเพราะมันจริงๆ ทำงานด้วยการสิ้นสุดด้วยสัญญาณจุดขึ้น

เหมือนกับกลุ่มตัวเลือก selector กลุ่มตัวเลือก declaration ก็เป็นวิธีที่มีประโยชน์ในการลดความยาวของฟอร์มแบบ ทำให้ฟอร์มแบบเหลืองชัดและง่ายต่อการดูแล

คำเตือน：มันเป็นข้อ良習ที่จะใส่ไม่ว่าใดบวกเข้าไปก็ตามหลังจากการปิดปัจจุบันของกฎ ไม่จำเป็นต้องกังวลว่าจะลืมใส่ไม่ว่าใดบวกเข้าไปก็ตามอีกครั้ง

การรวมกลุ่มตัวเลือก selector และ declaration

เราสามารถรวมกลุ่มตัวเลือก selector และกลุ่มตัวเลือก declaration ในกฎเดียวกัน เพื่อใช้คำสั่งน้อยที่สุดเพื่อกำหนดรูปแบบที่ซับซ้อน

กฎนี้จะกำหนดรูปแบบที่ซับซ้อนสำหรับแกนทั้งหมด

h1, h2, h3, h4, h5, h6 {
  color:gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;
  }

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

กฎนี้จะกำหนดรูปแบบของแกนนี้ทั้งหมดให้เป็นข้อความดำสีขาว ที่มี background สีขาว ปริมาณ padding 10 pixel และ border ตัวแปล 1 pixel ของข้อความ Verdana