İlk numaranın 6 olmasını istediğim sıralı bir listem var. Bunun . Bunun HTML 4.01'de desteklendiğini (artık kullanımdan kaldırıldı) . Bu spesifikasyonda, CSS kullanarak başlangıç tamsayısını belirtebileceğinizi söylüyorlar. ( startöznitelik yerine )
CSS ile başlangıç numarasını nasıl belirtirsiniz?
Yanıtlar:
Belirli bir noktada sıralı bir listeyi (OL) başlatmak için işlevselliğe ihtiyacınız varsa, doküman türünüzü HTML 5 olarak belirtmeniz gerekir; hangisi:
<!doctype html>Bu belge türü ile, startsıralı bir listede bir öznitelik ayarlamak geçerlidir . Gibi:
<ol start="6">
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ol>start="number" berbat çünkü kendisinden önceki numaralandırmaya göre otomatik olarak değişmez.
Daha karmaşık ihtiyaçlarına uygun olabileceğini Bunu yapmanın bir başka yolu kullanmaktır counter-resetve counter-increment.
Sorun
Bunun gibi bir şey istediğini söyle:
1. Item one
2. Item two
Interruption from a <p> tag
3. Item three
4. Item fourSaniyenin start="3"üçte libirini ayarlayabilirsiniz ol, ancak şimdi ilkine her öğe eklediğinizde bunu değiştirmeniz gerekecekol
Çözüm
Öncelikle mevcut numaralandırmamızın biçimlendirmesini temizleyelim.
ol {
list-style: none;
}Her birimizin sayacı göstermesini sağlayacağız
ol li:before {
counter-increment: mycounter;
content: counter(mycounter) ". ";
}Şimdi sayacın olher biri yerine yalnızca ilkinde sıfırlanmasını sağlamamız gerekiyor .
ol:first-of-type {
counter-reset: mycounter;
}gösteri
http://codepen.io/ajkochanowicz/pen/mJeNwY
Artık her iki listeye de istediğiniz kadar öğe ekleyebilirim ve numaralandırma korunacaktır.
1. Item one
2. Item two
...
n. Item n
Interruption from a <p> tag
n+1. Item n+1
n+2. Item n+2
...ol li {...}olmalı ol li:before {...} - aksi takdirde bu mükemmel bir çözüm, teşekkürler!
Cevabı bu başlıkta bulamadığıma şaşırdım.
Aşağıda özetlediğim bu kaynağı buldum :
HTML yerine CSS kullanan sıralı bir liste için başlangıç niteliğini ayarlamak için counter-incrementözelliği aşağıdaki gibi kullanabilirsiniz :
ol {
list-style: none;
counter-increment: start 3;
}
li:before {
content: counter(start, lower-alpha) ") ";
counter-increment: start;
}counter-increment 0 dizine alınmış gibi görünüyor, bu nedenle 4 ile başlayan bir liste elde etmek için şunu kullanın: 3 .
Aşağıdaki HTML için
<ol>
<li>Buy milk</li>
<li>Feed the dog</li>
<li>Drink coffee</li>
</ol>Benim sonucum
d) Buy milk
e) Feed the dog
f) Drink coffeeBenim göz atın keman
W3 wiki referansına da bakın
Diğerlerinin önerdiği gibi, öğenin startniteliği kullanılabilir ol.
Alternatif olarak, eleman valueözniteliği kullanılabilir li. Her iki özellik de HTML 4.01'de kullanımdan kaldırıldı olarak işaretlendi , ancak HTML 5'te ( olve li) değil.
<ol start="-2">
<li>Alpha</li>
<li>Beta</li>
<li value="10">Gamma</li>
<li>Delta</li>
</ol>Sıralı bir listenin numaralandırılmasına varsayılan değerden ("1") farklı bir numaradan başlamak, startözniteliği gerektirir . Bu özniteliğe HTML 4.01 spesifikasyonunda izin verildi (kullanımdan kaldırılmadı) (bu sorunun yayınlandığı sırada HTML 4.01 henüz "Yenilenmiş Spesifikasyon" değildi) ve mevcut HTML 5.2 spesifikasyonunda hala izin verilmektedir . olEleman ayrıca opsiyonel vardı starto niteliği XHTML 1.0'in geçiş DTD ancak içinde XHTML 1.0'in sıkı DTD (dize aramak ATTLIST olve özellik listesini kontrol edin). Bu nedenle, bazı eski yorumların söylediklerine rağmen, startözellik kullanımdan kaldırılmadı ; daha ziyade öyleydi geçersizdiHTML 4.01 ve XHTML 1.0'ın katı DTD'lerinde. Yorumlardan birinin iddia ettiğine rağmen, startözniteliğeul öğede ve şu anda Firefox ve Chromium'da çalışmıyor.
Binlik ayırıcının çalışmadığını da unutmayın (Firefox ve Chromium'un mevcut sürümlerinde). Aşağıdaki kod parçacığında şu 10.000şekilde yorumlanacaktır 10; aynısı için de geçerlidir 10,000. Bu nedenle, aşağıdaki counterdeğer türünü kullanmayın :
<ol start="10.000">
<li>Item 10.000</li>
<li>Next item</li>
<li>Next item</li>
</ol>Öyleyse kullanmanız gereken şey şudur (1000'den yüksek değerlerin gerekli olduğu nadir durumlarda):
<ol start="10000">
<li>Item 10.000</li>
<li>Next item</li>
<li>Next item</li>
</ol>Diğer yanıtlardan bazıları CSS özelliğinin kullanılmasını önerir counter, ancak bu, geleneksel içerik ve mizanpaj ayrımına karşı çalışır (sırasıyla HTML ve CSS'de). Belirli görme bozukluğu olan kullanıcılar kendi stil sayfalarını kullanabilir ve countersonuç olarak değerler kaybolabilir. İçin ekran okuyucu desteği counterde test edilmelidir. CSS'deki içerik için ekran okuyucu desteği nispeten yeni bir özelliktir ve davranış mutlaka tutarlı değildir. Bkz. Ekran Okuyucular ve CSS: Tarzın Dışına mı (ve İçeriğe) Giriyor muyuz? John Northup tarafından WebAIM blogunda (Ağustos 2017).
Listelerin iç içe olması durumunda, iç içe geçmiş liste öğelerini dışarıda bırakan bir işlem olması gerekir, bunu büyük ebeveynin bir liste öğesi olmadığını doğrulayarak başardım.
var section = document.getElementById("TheContent");
var list = section.getElementsByTagName("li");
var cnt = 0;
for (var i=0;i<list.length;i++){
if (list[i].parentElement.parentElement.nodeName!="LI") {
cnt += 1;
list[i].setAttribute("value",cnt);
}
}<!DOCTYPE html>
<html>
<body>
<section id="TheContent">
<h2>Ordered Lists - numbering not interupted</h2>
<p>This example avoids for the first list level that each ordered list starts with 1:</p>
<p><strong>1st list:</strong></p>
<ol>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ol>
<p><strong>2nd list:</strong></p>
<ol>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
</li>
<li>item</li>
</ol>
</section>
</body>
</html>CSS ile, iç içe geçmiş liste öğelerinin olduğu durumu ele almak biraz zordur, bu nedenle yalnızca ilk liste düzeyi, her yeni sıralı listeyle kesintiye uğramayan özel numaralandırmayı alır. Özel bir numaralandırma alacak liste öğelerinin olası yollarını tanımlamak için CSS birleştirici '>' kullanıyorum. Bkz https://www.w3schools.com/css/css_combinators.asp
body {
counter-reset: li_cnt;
}
/* discard auto generated numbers */
ol {
list-style-type: none;
}
/* all possible paths to the list item that shall have custom numbering */
section#TheContent > ol > li:before,
body > ol > li:before {
counter-increment: li_cnt;
content: counter(li_cnt)'. '; /* add own numbers */
}
/* switch on default auto generated numbers for nested list items */
li > ol {
list-style-type: decimal;
}<!DOCTYPE html>
<html>
<body>
<section id="TheContent">
<h2>Ordered Lists - numbering not interupted</h2>
<p>This example avoids for the first list level that each ordered list starts with 1:</p>
<p><strong>1st list:</strong></p>
<ol>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ol>
<p><strong>2nd list:</strong></p>
<ol>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
</li>
<li>item</li>
</ol>
</section>
</body>
</html>Açıkçası, ne @start sıralı bir listenin <ol> ne de bir liste öğesinin @ değeri <li> CSS aracılığıyla ayarlanamaz. Görmek https://www.w3schools.com/css/css_list.asp
Numaralandırmayı CSS'de bir sayaçla değiştirmek en iyi / en hızlı / hatasız çözüm gibi görünüyor ve bunu destekleyen başkaları da var, örneğin https://css-tricks.com/numbering-in-style/
Saf JavaScript ile her liste öğesinin @ değerini ayarlamak mümkündür, ancak bu elbette CSS'den daha yavaştır. Liste öğesinin sıralı bir <ol> listesine ait olup olmadığını kontrol etmek bile gerekmez, çünkü sıralanmamış listeler otomatik olarak dışarıda bırakılır.
var section = document.getElementById("TheContent");
var list = section.getElementsByTagName("li");
for (var i=0; i<list.length; i++){
if (list[i].parentElement.nodeName=="OL") {
list[i].setAttribute("value",i+1);
}
}<!DOCTYPE html>
<html>
<body>
<section id="TheContent">
<h2>Ordered Lists - numbering not interupted</h2>
<p>This example avoid that each ordered list starts with 1:</p>
<p><strong>1st list:</strong></p>
<ol>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ol>
<p><strong>2nd list:</strong></p>
<ol>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ol>
</section>
</body>
</html>