Bir elemanın indeksini (çocuk numarası) sadece CSS kullanarak eleman içerisinde metin olarak yerleştirmenin bir yolu var mı?

Question

amacım hattı ile bir metin dosyası hattı yazdırmak ve başlangıçta hat numarasını eklemektir. böylece gibi:

<div id="wrapper"> 
    <div class="line">1: asdf</div> 
    <div class="line">2: asdfasdf</div> 
    <div class="line">3: asdfasdfasdfasdf</div> 
    <div class="line">4: asdf</div> 
</div> 

n Eğer örneğin, üzerinde işlemleri gerçekleştirebilirsiniz üst öğesinde ve bir çocuk seçicinin içindeyken Bir elemanın indeksi sorumlu CSS bir değişkendir. nth-child(2n + 3)

bu değişkeni yakala ve düz metin olarak eklemek için herhangi bir yolu var mı? Esasen bu gibi:

.line:before { 
    content: n; 
} 

ben vanilya CSS ile çekip bir yolu var mı diye merak ediyorum, kullanıyorum budur SUKDÖ'nün ile gerçekleştirebilirsiniz biliyorum.

Answer 1

Evet, bununla kullanarak CSS sayaçları yapabilirdi. Eşleşen bir seçici ile karşılaşıldığında CSS sayaçları oluşturulabilir ve artırılabilir. Bu durum için, biz .wrapper elementin düzeyinde bir sayaç oluşturmak ve sonra yeni bir .line eleman karşılaşıldığında sayaç değeri artırmak olabilir.

counter-reset özelliği counter-increment değerini arttırmak için kullanılır ise sayaç oluşturmak için kullanılır. sayacın değeri daha sonra counter(counter-name) olarak değeri ile content özelliği üzerinden sözde elemanı tahsis edilebilir.

Aaron Lavers yaptığı açıklamada belirttiği gibi

CSS sayaçları yeni bir şey değildir ve supported from IE8 itself olduğunu.

#wrapper { 
 
    counter-reset: line-number; 
 
} 
 
.line { 
 
    counter-increment: line-number; 
 
} 
 
.line:before { 
 
    content: counter(line-number)": "; 
 
}

<div id="wrapper"> 
 
    <div class="line">asdf</div> 
 
    <div class="line">asdfasdf</div> 
 
    <div class="line">asdfasdfasdfasdf</div> 
 
    <div class="line">asdf</div> 
 
</div>

---

Ayrıca, 1 'den daha fazla bir sayı değerini artırmak 0'in vb

farklı bir sayı olarak baz değeri ile başlar, çıkış değeri için stiller ayarlayabilir

.wrapper { 
 
    counter-reset: line-number 2; /* specifying a number in counter-reset means set the starting value as that number */ 
 
} 
 
.line { 
 
    counter-increment: line-number 2; /* specifying a number in counter-increment means increment the counter by that much every time */ 
 
} 
 
.line:before { 
 
    content: counter(line-number, lower-roman)": "; /* the second parameter represents the style of the output value */ 
 
} 
 

 
#wrapper2.wrapper .line:before { 
 
    content: counter(line-number, decimal-leading-zero)": "; 
 
}

<h3>Lower Roman Style with Base Value as 2 and increments of 2</h3> 
 
<div id="wrapper" class="wrapper"> 
 
    <div class="line">asdf</div> 
 
    <div class="line">asdfasdf</div> 
 
    <div class="line">asdfasdfasdfasdf</div> 
 
    <div class="line">asdf</div> 
 
</div> 
 

 
<h3>Decimal Leading Zero Style with Base Value as 2 and increments of 2</h3> 
 
<div id="wrapper2" class="wrapper"> 
 
    <div class="line">asdf</div> 
 
    <div class="line">asdfasdf</div> 
 
    <div class="line">asdfasdfasdfasdf</div> 
 
    <div class="line">asdf</div> 
 
</div>