LESS - Ana Seçiciler

Bu bölümde, nasıl olduğunu anlayalım Parent Selectorsiş. Kullanarak üst seçiciye başvurmak mümkündür&(ve işareti) operatörü. Yuvalanmış bir kuralın üst seçicileri,& operatörü ve mevcut bir seçiciye değiştirici bir sınıf veya sözde sınıf uygularken kullanılır.

Aşağıdaki tablo üst öğe seçici türlerini göstermektedir -

Sr.No.	Türler ve Açıklama
1	Çoklu & & en yakın seçiciyi ve ayrıca tüm üst seçicileri temsil eder.
2	Seçici Sırasını Değiştirme Bir seçicinin devralınan (üst) seçicilerin başına eklenmesi, seçici sıralaması değiştirildiğinde yararlıdır.
3	Combinatorial Explosion & virgülle ayrılmış bir listede seçicilerin olası tüm permütasyonunu da üretebilir.

Misal

Aşağıdaki örnek, LESS dosyasında üst seçicinin kullanımını gösterir -

<!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>

Ardından style.less dosyasını oluşturun.

style.less

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

Aşağıdaki komutu kullanarak style.less dosyasını style.css olarak derleyebilirsiniz -

lessc style.less style.css

Yukarıdaki komutu yürütün; style.css dosyasını aşağıdaki kodla otomatik olarak oluşturacaktır -

style.css

a {
   color: #5882FA;
}

a:hover {
   background-color: red;
}

Yukarıdaki örnekte, & seçiciyi ifade eder a.

Çıktı

Yukarıdaki kodun nasıl çalıştığını görmek için şu adımları izleyin -

Yukarıdaki html kodunu şuraya kaydedin: parent_selector1.htm dosya.
Bu HTML dosyasını bir tarayıcıda açın, aşağıdaki çıktı görüntülenecektir.

Veli seçicileri Eğer varsayılan dışında bir şekilde iç içe kuralın seçiciler birleştirmek gerektiğinde operatör gibi birçok kullanımı vardır. Başka bir tipik kullanım&tekrar tekrar sınıf isimleri oluşturmaktır. Daha fazla bilgi için buraya tıklayın .