“ ความจำเพาะ” หมายถึงอะไรใน CSS?

CSS ใช้มาตราส่วนตัวเลขเพื่อกำหนดพลังของตัวเลือก พลังอย่างที่หนึ่งแข็งแกร่งที่สุดหรือกล่าวอีกนัยหนึ่งซึ่งตัวเลือกมีความจำเพาะสูงสุด ตัวเลือกที่มีตัวเลขเฉพาะเจาะจงสูงสุดจะกำหนดรูปลักษณ์ขององค์ประกอบ HTML เสมอ ไม่ว่าตัวเลือกที่อ่อนแอกว่าจะใช้สไตล์ใดกับมันก็ตาม

หากคุณมีองค์ประกอบปุ่ม มีหลายวิธีในการปรับใช้สไตล์กับองค์ประกอบนั้น ใน CSS ตัวเลือกที่ใช้กันทั่วไป 3 ตัวเลือกคือ type , class , id .

คุณสามารถจัดรูปแบบองค์ประกอบได้โดยตรงผ่านตัวเลือกประเภท:

button {
  background-color: red;
}

คุณสามารถใช้แอตทริบิวต์คลาส:

.button {
  background-color: red;
}

หรือแอตทริบิวต์รหัส:

#button {
  background-color: red;
}

ตัวเลือกแต่ละตัวมีค่าตัวเลขเป็น 1

ดังนั้นหากตัวเลือก CSS ด้านบนทั้งหมด (ประเภท คลาส id) มีค่าเท่ากัน (1) กฎชุดใดด้านบนจะชนะ เมื่อใช้ในสไตล์ชีตเดียวกัน

ID ชนะ (#button ) เนื่องจากรหัสมีความสำคัญเหนือตัวเลือกคลาสและประเภท

เกิดอะไรขึ้นถ้าไม่มี ID ที่เกี่ยวข้อง?

จากนั้นตัวเลือกคลาส (.button ) ชนะเพราะคลาสมีความสำคัญเหนือตัวเลือกประเภท

เดี๋ยวก่อน แล้ว “Cascade” ของ CSS (CSS =Cascading Style Sheets) ล่ะ

ใน CSS หากทุกสิ่ง เท่ากัน ไม่ว่าคุณจะใช้ตัวเลือกใดก็ตามในสไตล์ชีตของคุณก็ตาม จะเป็นผู้ชนะ

สมมติว่าคุณเพิ่ม 3 ชั้นเรียนด้วย ชื่อเดียวกัน (.hero-button ,) ในสไตล์ชีตของคุณ แต่ละคลาสกำหนดเป้าหมายคุณสมบัติการจัดสไตล์เดียวกัน (background-color ) แต่แต่ละคลาสมีคุณสมบัติ ค่า . ที่แตกต่างกัน ในกรณีนี้ สีเขียว น้ำเงิน แดง ตามลำดับ

.hero-button {
	background-color: green;
}

.hero-button {
		background-color: blue;
}

.hero-button {
	background-color: red;
}

จากนั้นคุณใช้ทั้ง 3 รายการกับองค์ประกอบ HTML เดียวกัน:

<button class="hero-button">Button</button>

.hero-buttonสุดท้าย คลาสในสไตล์ชีตจะอยู่นำหน้าคลาสก่อนหน้าใดๆ ที่มีชื่อคลาสเดียวกัน ซึ่งทำให้พื้นหลังของปุ่มเป็นสีแดง นั่นเป็นวิธีที่ CSS cascade ทำงาน ลำดับของความเฉพาะเจาะจงคือจากบนลงล่าง โดยที่ตัวเลือกด้านล่างจะชนะ จำไว้ว่านี่เป็นความจริงเพียง 100% เมื่อทุกสิ่งเท่าเทียมกัน

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

สับสน?

ไม่ต้องกังวล มันจะสมเหตุสมผลในอีกสักครู่

นี่คือ 3 .hero-button คลาสก่อนหน้านี้ทั้งหมดมี background-color . เหมือนเดิม จากเมื่อก่อน แต่ด้วยสองคลาสแรก แต่ละคลาสจะได้รับคุณสมบัติการจัดสไตล์เพิ่มเติม (padding &font-size ):

.hero-button {
  background-color: green;
  padding: 2rem;
}

.hero-button {
  background-color: blue;
  font-size: 2rem;
}

.hero-button {
  background-color: red;
}

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

นี่คือผลลัพธ์:

https://codepen.io/StrengthandFreedom/pen/mdyMGPL

อย่างที่คุณเห็น องค์ประกอบปุ่มของเราซ้อนกัน (รวม) คุณสมบัติการจัดสไตล์ทั้งหมดจาก 3 .hero-button คลาส และตอนนี้องค์ประกอบปุ่มของเราได้รับคุณสมบัติทั้ง 3 ประการ:

  padding: 2rem;
  font-size: 2rem;
  background-color: red;

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

ในตัวอย่างข้างต้น ทั้ง 3 คลาสกำหนดเป้าหมาย background-color คุณสมบัติและที่นี่ระดับล่างสุดชนะเนื่องจากกฎ CSS Cascade (Order Specificity) แต่ตั้งแต่ .hero-button สุดท้าย ในเป้าหมายของสไตล์ชีตของคุณ ไม่ใช่ padding หรือ font-size คุณสมบัติ คุณสมบัติเหล่านั้นจากสอง .hero-button แรก คลาสได้รับอนุญาตให้นำไปใช้กับองค์ประกอบปุ่มได้

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

สถานการณ์ที่พบบ่อยที่สุดอย่างหนึ่งคือนักพัฒนาหลายคนได้เพิ่มคลาส CSS ลงในสไตล์ชีตที่มีอยู่แล้วในที่อื่น และนั่นจะทำให้เกิดความสับสนอย่างรวดเร็ว หากคุณไม่รู้หรือลืมว่า CSS จะสแต็คคุณสมบัติร่วมกันดังที่เราเห็นก่อนหน้านี้

ดังนั้น คุณอาจเพิ่มคลาส CSS ชื่อ:primary-button ด้วยคุณสมบัติดังต่อไปนี้

.primary-button {
  background-color: red
  padding: 1rem;
  font-size: 1.125rem;
}

ด้วยเหตุผลบางอย่าง ปุ่มของคุณดูเหมือนจะมีเงาอยู่ ซึ่งคุณไม่ได้เพิ่มเข้าไป นั่นอาจเกิดจากสองสิ่ง อาจเป็นเพราะมีคนใช้สไตล์กับองค์ประกอบปุ่มโดยตรง:

button {
 box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
}

หรือเนื่องจากก่อนหน้านี้มีคนเพิ่มชั้นเรียนในสไตล์ชีตที่มีชื่อเดียวกันและเพิ่ม box-shadow คุณสมบัติเช่นนี้:

.primary-button {
 box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
}

หากต้องการลบสไตล์ที่ไม่ต้องการออก คุณต้องค้นหาตำแหน่งในฐานโค้ดของคุณที่มีการใช้คุณสมบัติที่ไม่ต้องการนี้และลบออกหรือกำหนดเป้าหมายโดยตรงแล้วลบออกใน ของคุณ .primary-button คลาสเช่นนี้:

.primary-button {
 background-color: red
 padding: 1rem;
 font-size: 1.125rem;
 box-shadow: 0; /*removes existing box shadow value*/
}

ฉันรู้ว่าคุณกำลังคิดอะไรอยู่ นี่เป็นวิธีแก้ปัญหาที่ยุ่งเหยิง ถูกต้อง. แต่บางครั้ง คุณอาจพบกับโครงการขนาดใหญ่และไม่เป็นระเบียบ (โดยทั่วไปจะมีโค้ดดั้งเดิมจำนวนมาก) ซึ่งคุณไม่สามารถเข้าถึงโค้ด CSS ที่มีอยู่ทั้งหมดได้ (นักพัฒนาซอฟต์แวร์ที่มีประสบการณ์บางอย่างสามารถเกี่ยวข้องกับสิ่งนี้ได้) ในสถานการณ์แบบนี้ คุณไม่สามารถแก้ไขโค้ดที่มีอยู่ได้ตามที่คุณต้องการ — คุณต้องแทนที่โค้ดที่มีอยู่ และในกรณีนั้น เป็นการดีที่จะรู้ว่า CSS Specificity และ Source Order ทำงานอย่างไร

คุณสามารถใช้เครื่องคำนวณความจำเพาะบนเว็บไซต์นี้เพื่อเปรียบเทียบหมายเลขเฉพาะของตัวเลือก CSS ต่างๆ รวมถึงตัวเลือกกลุ่ม (รวมตัวเลือก)

เคล็ดลับ:วิธีที่ดีในการหลีกเลี่ยงปัญหาความเฉพาะเจาะจงใน CSS คือการใช้คลาสหลักเพื่อจัดรูปแบบ UI ของคุณแทนตัวเลือกประเภท และใช้ ID เพียงเล็กน้อยเท่านั้น นอกจากนี้ ให้หลีกเลี่ยงการใช้ตัวเลือกกลุ่มหากทำได้ เนื่องจากอาจนำไปสู่ปัญหาที่คาดเดาไม่ได้ในฐานรหัสที่กำลังเติบโต