น้อย - ตัวเลือกหลัก

ในบทนี้ให้เราเข้าใจวิธีการ Parent Selectorsงาน. เป็นไปได้ที่จะอ้างอิงตัวเลือกหลักโดยใช้&(ampersand) ตัวดำเนินการ ตัวเลือกหลักของกฎที่ซ้อนกันจะแสดงโดย& ตัวดำเนินการและใช้เมื่อใช้คลาสการปรับเปลี่ยนหรือคลาสหลอกกับตัวเลือกที่มีอยู่

ตารางต่อไปนี้แสดงประเภทของตัวเลือกหลัก -

ซีเนียร์	ประเภทและคำอธิบาย
1	หลาย & & จะเป็นตัวแทนของตัวเลือกที่ใกล้ที่สุดและตัวเลือกหลักทั้งหมด
2	การเปลี่ยนลำดับตัวเลือก การเลือกตัวเลือกล่วงหน้าไปยังตัวเลือกที่สืบทอด (พาเรนต์) มีประโยชน์เมื่อมีการเปลี่ยนแปลงลำดับตัวเลือก
3	Combinatorial Explosion & ยังสามารถสร้างการเปลี่ยนแปลงที่เป็นไปได้ทั้งหมดของตัวเลือกในรายการโดยคั่นด้วยเครื่องหมายจุลภาค

ตัวอย่าง

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

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
      <title>Parent Selector</title>
   </head>

   <body>
      <h2>Welcome to TutorialsPoint</h2>
      <ul>
         <li><a>SASS</a></li>
         <li><a>LESS</a></li>
      </ul>
   </body>
</html>

จากนั้นสร้างไฟล์style.less

style.less

a {
   color: #5882FA;
   &:hover {
      background-color: #A9F5F2;
   }
}

คุณสามารถคอมไพล์ไฟล์style.lessเป็นstyle.cssโดยใช้คำสั่งต่อไปนี้ -

lessc style.less style.css

ดำเนินการคำสั่งดังกล่าว มันจะสร้างไฟล์ style.cssโดยอัตโนมัติด้วยรหัสต่อไปนี้ -

style.css

a {
   color: #5882FA;
}

a:hover {
   background-color: red;
}

ในตัวอย่างข้างต้น & หมายถึงตัวเลือก a.

เอาต์พุต

ทำตามขั้นตอนเหล่านี้เพื่อดูว่าโค้ดด้านบนทำงานอย่างไร -

บันทึกรหัส html ด้านบนในไฟล์ parent_selector1.htm ไฟล์.
เปิดไฟล์ HTML นี้ในเบราว์เซอร์ผลลัพธ์ต่อไปนี้จะปรากฏขึ้น

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