LI elemanlarının sırasını yalnızca CSS ile değiştirme

Question

Halihazırda bulunan bir sayfayı mevcut CSS ile güncellemem gerekiyor. Mevcut HTML'ye dokunmama izin VERMEZ. Tek seçeneğim, mevcut olanı geçersiz kılmak için başka bir CSS/CSS3 kodu oluşturmaktır. JS yok. JQuery yok.

Aşağıda örnek bir HTML örneğidir. Hedef çıkışım, pozisyonu tersine çevirmek için bir "CSS/CSS3" kodu geçersiz kılmak, "ikinci" sınıfı ise sipariş listesinde birinci olmaktır.

Bunu yapmaya başladım ama iyi bir kaynak bulamadım. Yani sadece aşağıda hayal CSS Code gibi bu yapabileceğini bir CSS3 kodu olabileceğini düşündük:

HTML:

bu dünya CSS Kanununun Out

<ul id="mainList"> 
    <li class="first">i am first</li> 
    <li class="second">i am second</li> 
    <li class="third">i am third</li> 
</ul> 

:

.second { 
    list-position: rank(1); 
} 
.first { 
    list-position: rank(2); 
} 

Herhangi bir öneri çok takdir edilecektir. Burada

Fiddle ->http://jsfiddle.net/philcyb/mL41up6t/

Answer 1

Sen çocuklara li unsurları yapmak flexbox items ve sonra eleman (lar) ın görsel sırasını değiştirmek için order property kullanabilirsiniz.

Bu durumda, ikinci öğeye öncedeğerini -1 değerini verebilirsiniz.

#mainList { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.second { 
 
    order: -1; 
 
}

<ul id="mainList"> 
 
    <li class="first">I am first</li> 
 
    <li class="second">I am second</li> 
 
    <li class="third">I am third</li> 
 
</ul>

Updated Example

Tarayıcı desteği found here olabilir. Sorunuzu css3 ile etiketlediniz. Bu nedenle, tarayıcı desteğinin, şu anda yaklaşık% 93.03 oranında esnek kutulu olduğunu düşündüğünden şüpheleniyorum.

---

Bir yan not olarak, ayrıca ziyade sınıfları kullanmak yerine kendi dizine göre li elemanı seçmek için :nth-child/:nth-of-type yararlanabilirler.

#mainList { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
#mainList li:nth-of-type(2) { 
 
    order: -1; 
 
}

<ul id="mainList"> 
 
    <li>I am first</li> 
 
    <li>I am second</li> 
 
    <li>I am third</li> 
 
</ul>

Answer 2

Josh cevap mükemmeldir! Sadece şu anda kullandığım ek bir not: mobil cihazlar (iphone gibi) ve diğer tarayıcı uyumluluğu için, daha uyumlu çalışmasını sağlamak için aşağıdaki CSS kodlarını ekledim.

#mainList { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-direction: column; 
    -webkit-box-orient: vertical; 
    flex-direction: column !important; 
} 
#mainList li:nth-of-type(2) { 
    -webkit-box-ordinal-group: 1; 
    -moz-box-ordinal-group: 1; 
    -ms-flex-order: 1; 
    -webkit-order: 1; 
    order: 1; 
} 
#mainList li:nth-of-type(1) { 
    -webkit-box-ordinal-group: 2; 
    -moz-box-ordinal-group: 2; 
    -ms-flex-order: 2; 
    -webkit-order: 2; 
    order: 2; 
}