Soru CSS ile belirli bir sınıfı sayabilir misiniz?


Gibi basit bir liste var diyor:

<ol>
    <li class="count">one</li>
    <li class="count">two</li>
    <li class="count">three</li>
    <li class="count">four</li>
    <li>blabla</li>
    <li class="count">five</li>
    <li class="count">six</li>
    <li>blabla</li>
    <li class="count">seven</li>
</ol>

Şimdi sadece 'count' sınıfıyla liste öğelerini numaralandırmak istiyorum

Yani CSS'yi eklersek:

li {
    list-style-type: decimal;
}

ve sınıfsız liste öğeleri için liste stili türünü kaldırın:

li:not(.count) {
    list-style-type: none;
}

Bunu anladım:

KEMAN

li {
  list-style-type: decimal;
}
li:not(.count) {
  list-style-type: none;
}
<ol>
  <li class="count">one</li>
  <li class="count">two</li>
  <li class="count">three</li>
  <li class="count">four</li>
  <li>blabla</li>
  <li class="count">five</li>
  <li class="count">six</li>
  <li>blabla</li>
  <li class="count">seven</li>
</ol>

Buradaki bariz problem, sınıfsız liste öğelerinin de burada gösterilmediği, burada 'sayıldığını' göstermesidir.

Yani yukarıdaki örnekte, liste numaralandırılmalı ve numaralar sınıfsız liste öğelerini atlayarak numaralandırılmalıdır. Bu CSS ile yapılabilir mi?


32
2017-11-10 10:39


Menşei


Pedantic olmak gerekirse: liste öğeleriniz için sayıları istiyorsanız, bu en iyi şekilde sıralanmış bir liste olarak gösterilebilir. <ol> - nickgrim
@nickgrim - bunu işaret ettiğin için teşekkürler - siparişi verilen bir listeyi kullanmak için soruyu düzenledim <ol> - Danield


Cevaplar:


Bu ile yapılabilir CSS-sayaçlar

Eğer ayarladıysam display:none Sayaç ile oluşturulan içerik üzerinde, sayaç üzerine atlar ve bir sonraki öğeye devam eder!

KEMAN

(Düzenle: Ya da alternatif olarak - başkalarının da işaret ettiği gibi - tezgahı yalnızca belirli bir sınıfla olan elemanlar üzerinde artırabiliriz - öyle öyle)

ol {
  counter-reset: count;
  list-style-type: none;
  padding-left: 30px;
}
li:before {
  content: counter(count)".";
  counter-increment: count;
}
li:not(.count) {
  padding-left: 13px;
}
li:not(.count):before {
  display: none;
}
<ol>
  <li class="count">one</li>
  <li class="count">two</li>
  <li class="count">three</li>
  <li class="count">four</li>
  <li>blabla</li>
  <li class="count">five</li>
  <li class="count">six</li>
  <li>blabla</li>
  <li class="count">seven</li>
</ol>

Yani aslında, sayaçlarla, yalnızca sınıfları sayabiliriz, aynı zamanda herhangi bir seçici kombinasyonunu da sayabiliriz.

İşte Bir örnek kavram kanıtı için:

html {
  counter-reset: divs;
}
body {
  counter-reset: paragraphs;
  position: relative;
}
div {
  counter-increment: divs;
}
.wpr {
  counter-reset: count-me;
  position: relative;
}
.container {
  position: relative;
  border-bottom: 1px solid green;
}
.container .count-me {
  counter-increment: count-me;
}
.container p {
  counter-increment: paragraphs;
}
.wpr:after {
  content: "Number of count-me classes in container:" counter(count-me);
  position: absolute;
  bottom: -20px;
}
.container:after {
  content: "Number of paragraphs:" counter(paragraphs);
  position: absolute;
  bottom: -40px;
}
body:after {
  content: "Number of divs:" counter(divs);
  position: absolute;
  bottom: -60px;
}
<div class="wpr">div1
  <div class="container">div2
    <div>div3
      <span class="count-me">count-me</span>
    </div>
    <div>div4
      <span class="count-me">count-me</span>
      <p>I"m a paragragh</p>
    </div>
    <div>div5
      <p>I"m a paragragh</p>
    </div>
    <div>div6
      <span class="count-me">count-me</span>
    </div>
    <div>div7
      <span class="count-me">count-me</span>
      <p>I"m a paragragh</p>
    </div>
    <div>div8</div>
  </div>
</div>


34
2017-11-10 10:42



Teşekkürler .. btw, bu da çalışıyor .. :) keman - Mr_Green
Alternatif olarak, sınıf adını nocount bunun yerine sayacı olmayan öğelere atayın. li:before karşı beyanda bulunacak ve li.nocount:before  display:none beyanı. Bonus puanları: UL pozisyonunu rölatif ve mutlak mutlak hale getirin: jsfiddle.net/em13s2qL/6 - sleblanc
Gerçekten kullanmaktan hoşlanmıyorum :not() Seçici. Eski tarayıcılar bu css parçasını tıkarlar. Bunun yerine şunu deneyin: jsfiddle.net/q7zLz3nz çok daha uyumlu ve yaşlı dostu olan. - Ismael Miguel


verilmesi display: block olmadan li elemanlarına .count sınıf da çalışıyor.

ul {
    list-style-type:decimal;
    padding-left: 30px;
}
li:not(.count) {
    display: block;
}

Çalışma fiddle

Daha eski tarayıcılar için:

ul {
    list-style-type:decimal;
    padding-left: 30px;
}
li {
    display: block;
}
li.count {
    display: list-item;
}

Çalışma fiddle

Başka bir şekilde, eğer tüm görüntü durumunu değiştirmeyi planlıyorsanız li elemanlar, kullan :after/:before Liste öğesi olarak görünen sözde sınıflar.

Çalışma fiddle


9
2017-11-10 10:52



Hey @Mr_Green, çözümünüz çok iyi çalıştığından size bir ödül verdim. - Danield
@Danield ohh teşekkürler :) - Mr_Green


Özellikle bir liste öğesinin değerini ayarlamak için HTML'yi kullanabilirsiniz:

<ul>
    <li class="count">one</li>
    <li class="count">two</li>
    <li class="count">three</li>
    <li class="count">four</li>
    <li>blabla</li>
    <li value="5" class="count">five</li>
    <li class="count">six</li>
    <li>blabla</li>
    <li value="7" class="count">seven</li>
</ul>

http://jsfiddle.net/03bu5sct/1/

Saf bir CSS çözümü istiyorsanız CSS3 sayaçlarına da bakmak isteyebilirsiniz.


3
2017-11-10 10:49



Bunun yerine bu css hakkında: li.count{list-style-type: decimal;}li{list-style-type: none;}? - Ismael Miguel


CSS 2.1 özelliklerinde sayaç bölümleri özel sayacınızı nasıl uygulayacağınıza dair çeşitli örnekler içerir. İşte size çok basit bir örnek:

  1. Bir sayaç değişkeni tanımlayın
  2. Belirli unsurlar için artırın (sizin durumunuza göre) .count elementler)
  3. Sözde elemanların içinde göster

.custom-counter {
  /* define a counter variable */
  counter-reset: clumsycount 0;
  /* style */
  list-style-type: none;
}
.custom-counter .count {
  /* increment the counter variable */
  counter-increment: clumsycount 1;
  /* style */
  position: relative;
  background-color: #EEE;
}
.custom-counter .count:before {
  /* display the counter variable */
  content: counter(clumsycount) ".";
  /* style */
  position: absolute;
  top: 0;
  right: 100%;
  padding-right: .25em;
  background-color: #CCC;
}
<ul class="custom-counter">
  <li class="count">one</li>
  <li class="count">two</li>
  <li class="count">three</li>
  <li class="count">four</li>
  <li>blabla</li>
  <li class="count">five</li>
  <li class="count">six</li>
  <li>blabla</li>
  <li class="count">seven</li>
</ul>


3
2017-11-10 17:22





li {
    list-style-type: decimal;
}

li:not(.count) {
      -webkit-appearance: textfield;
      -moz-appearance: textfield;
      appearance: textfield;
}

bu basit bir kesmek http://jsfiddle.net/9w9vkcf3/1/

appearance özellik, kullanıcıların işletim sisteminin temasına dayalı bir platform yerel stilini kullanarak bir öğeyi görüntülemek için kullanılır. kaynak


3
2018-04-25 15:55





Bir çözüm kullanmak olabilir CSS sayaçları ve sözde elementi kullanarak uygular :önce ilerlemek içerik sayaç ile özellik,

Sayaçlar iki farklı işlevle belirtilebilir: 'sayaç ()' veya   'Sayaçlar ()'. İlkinin iki formu vardır: 'sayaç (isim)' veya   'sayaç (isim, stil)'. Oluşturulan metin değeri   Bu sözde elementte verilen ismin en içteki sayacı;   belirtilen tarzda biçimlendirilir (varsayılan olarak 'ondalık').   İkinci fonksiyonun da iki formu vardır: 'sayaçlar (isim, dizi)' veya   'sayaçlar (isim, dize, stil)'. Oluşturulan metin değeri   Bu sözde elementte verilen isimle tüm sayaçlar,   Belirtilen dize ile ayrılmış en dıştaki en içteki. Sayaçları   belirtilen stilde (varsayılan olarak 'ondalık') oluşturulur. Bakın   Daha fazla bilgi için otomatik sayaçlarda bölüm ve numaralandırma.   ad 'none', 'devralma' veya 'başlangıç' olmamalıdır. Böyle bir isim neden olur   yok sayılacak beyan.

sadece li sınıf elemanları count:

body {
  counter-reset: section;/* Set the section counter to 0 */
}
ol {
  list-style-type: none;
}
li.count::before {
  counter-increment: section;/* Increment the section counter*/
  content: counter(section)". ";/* Display the counter */
}
<ol>
  <li class="count">one</li>
  <li class="count">two</li>
  <li class="count">three</li>
  <li class="count">four</li>
  <li>blabla</li>
  <li class="count">five</li>
  <li class="count">six</li>
  <li>blabla</li>
  <li class="count">seven</li>
</ol>

Referanslar

karşı arttırma

counter-reset


1
2018-04-24 14:23





Hadi bakalım:

https://jsfiddle.net/Cheese1991/qnmhvvxj/

HTML:

<ul>
<li>One</li>
<li>Two</li>
<li class="skip">Skip</li>
<li>Three</li>
<li>Four</li>
</ul>

CSS:

ul {
    counter-reset:yourCounter;
    list-style:none;
}
ul li:not(.skip) {
    counter-increment:yourCounter;
    list-style:none;
}
ul li:not(.skip):before {
    content:counter(yourCounter) ". ";
}
ul li.skip:before {
    content:"\a0\a0\a0";
}

umarım bu sana yardımcı olmuştur


0
2018-05-01 08:23