Tek bir üst sınıfı kullanarak tüm bireysel liranızı nasıl geçebiliriz?

Sadece tek bir üst sınıfı kullanarak tüm bireysel geçişleri geçmek istiyorum: "burada mainDiv kullanıyoruz" Bunu css3'te nasıl yapabiliriz? Jquery veya javascript'te değil. Tek bir üst sınıfı kullanarak tüm bireysel liranızı nasıl geçebiliriz?

css: 
    .mainDiv ul li:nth-child(1){ 
     color:red; 
    } 
    .mainDiv ul li:nth-child(2){ 
      color:blue; 
     } 
    .mainDiv ul li:nth-child(3){ 
      color:yellow; 
     }

nazik i ul> li ikinci dizi çapraz istediğiniz kod akıllı gibi

altında söz (a, b, c) yalnızca bir üst sınıfı adı (mainDiv) kullanılarak gerçekleştirilir. Bunu css3 ile nasıl yapabilirim?

HTML: Sorunuzu anlamak

<div class="mainDiv"> 

    <ul> 
    <li>x</li> 
    <li>y</li> 
    <li>z</li> 
</ul> 

<ul> 
    <li>a</li> 
    <li>b</li> 
    <li>c</li> 
</ul> 

</div>

kaynak

2016-04-13 Sivarajan

bu HTML kodunu yararlı olabilir.

<head> 
    <style> 
     /* all list items will be blue */ 
     .my-class li { 
      color: blue; 
     } 

     /* only second list will be bold */ 
     .my-class ul:nth-child(2) li { 
      font-weight: bold; 
     } 

     /* all third list items will be underline */ 
     .my-class ul li:nth-child(3) { 
      text-decoration: underline; 
     } 
    </style> 
</head> 
<body> 
    <div class="my-class"> 
     <ul> 
      <li>x</li> 
      <li>y</li> 
      <li>z</li> 
     </ul> 

     <ul> 
      <li>a</li> 
      <li>b</li> 
      <li>c</li> 
     </ul> 
    </div> 
</body>

kaynak

2016-04-13 13:36:27 h0nza

 /* only second list will be bold */ .my-class ul:nth-child(2) li { font-weight: bold; }

Bu kod 2 ul tüm li için "cesur" etkileyecektir ul:nth-of-type(2). ama bireysel li'ye ihtiyacım var.

örn:

/* only second list will be bold */ .my-class ul:nth-child(2) li:nth-child(2) { color:red; }

bu kod ikinci li etkilemiyor (yani: "b",) .my sınıf ül: n'inci-çocuk (2) li: n'inci-çocuk (2) – Sivarajan

'Traversing' derken ne sorduğunuzu tam olarak bilmiyorum. Ancak, belirli öğeleri eşleştiriyorsa, sağladığınız css hemen hemen istediğiniz şeyi yapar.

mainDiv altında herhangi bir li eşleştirmek için:

.mainDiv li { 
    // my css 
}

ikinci ul sadece eşleşmesi için: :last-child mainDiv son çocuğu seçmenize olanak sağlar

.mainDiv ul:last-child li { 
    // my css 
}

Not söyledi. Diğer çözümler (diğerleri arasında) kullanmak için olabilirdi ul:nth-child(2) veya

kaynak

2016-04-13 13:36:47

Tek bir üst sınıfı kullanarak tüm bireysel liranızı nasıl geçebiliriz?

cevap

İlgili konular