CSS bezogen; Targeting eine spezielle li-Klasse

Brauchen Sie ein wenig Hilfe mit der folgenden Situation. Ich habe ein Schieber, der das Setup ist, ist so (vereinfacht):CSS bezogen; Targeting eine spezielle li-Klasse

<div class="slider"> 
    <ul> 
     <li>...</li> 
     <li class="current">...</li> 
     <li class="center active">...</li> 
     <li class="current">...</li> 
     <li>...</li> 
    </ul> 
</div> 


.slider li {opacity: 0.3;} 
.slider li.center.active {opacity: 1;} 
.slider li.current:first-child {opacity: 1;} // this here doesn't work.

ich nicht .slider li:nth-child(2).current {opacity: 1;} verwenden kann, weil ich einen Schieber bin mit, so dass die Anzahl, wenn li Tags ist anders.

Gibt es eine andere Art und Weise, andere als die Li-Klassen zu ändern, nur die Opazität der ersten current Klasse zu ändern.

Quelle

2016-03-31 kiarashi

Können Sie eine Geige von Ihnen Code zur Verfügung stellen? –

https://jsfiddle.net/ua60Ld31/5/ – kiarashi

Mögliches Duplikat von [CSS3 Selektor: First-of-Type mit Klassenname?] (Http://StackOverflow.com/Questions/6447045/Css3-selector-first- von-type-with-class-name) – oboshto

können Sie unter Code erwähnt verwenden:

<div class="slider"> 
    <ul> 
     <li>...</li> 
     <li class="current">...</li> 
     <li class="center active">...</li> 
     <li class="current">...</li> 
     <li>...</li> 
    </ul> 
</div> 
.slider li {opacity: 0.3;} 
.slider li.center.active {opacity: 1;} 
.slider li.current {opacity: 1;} 
.slider li.center.active ~ li.current {opacity: 0.3;}

Quelle

2016-03-31 12:39:48

Fabelhaft! Das hat funktioniert, danke. – kiarashi

Ich glaube nicht, dass das funktioniert, wenn Sie nach '.center.active' weitere Elemente' .current' hinzufügen –

https://jsfiddle.net/1jko09xq/1/

i think you need this try this

Quelle

2016-03-31 12:35:35

In Ihrer Situation erste Strom <li> ist eigentlich ein zweites Element von <ul> Verwendung dieses css

.slider li.current:nth-child(2) {opacity: 1;}

Arbeitsbeispiel Siehe: https://jsfiddle.net/yudi/a3w1bshr/

In css wir brauchen Position mit Gesamtelementen zählen und h Es ist ein zweites Element von <ul>

Quelle

2016-03-31 12:36:53

Ich fürchte, das kann ich auch nicht. Es ist ein Schieberegler, also kann die Anzahl der 'li-Tags' geändert werden. Im Beispiel ist es der zweite, aber da es sich hier um einen Slider handelt, kann es sich auch um das fünfte li-Tag handeln. – kiarashi

in diesem Fall fügen Sie dieses CSS durch jquery '$ ('. Slider li.current'). Eq (0) .css ('Opazität', '1');'. Die JQuery-Regel unterscheidet sich von CSS und wird sie als erstes Element von '.current' betrachten. –

Vielen Dank, dass Sie mich darüber informiert haben. Ich wusste nicht, dass dies auch möglich sein könnte. Dank dir möchte ich in diesem Jahr auf jeden Fall Jquery lernen. :) – kiarashi

Sie können eine zusätzliche Klasse zu der Lizenz hinzufügen, die Sie ändern möchten.

HTML:

<div class="slider"> 
     <ul> 
      <li>...</li> 
      <li class="current sliderOpacity">...</li> 
       <li class="center active">...</li> 
       <li class="current">...</li> 
       <li>...</li> 
      </ul> 
     </div>

CSS:

.sliderOpacity { 
opacity: 1;}

Quelle

2016-03-31 12:37:21 6134548

Ich fürchte, ich kann keine zusätzliche Klasse hinzufügen. – kiarashi

Warum konnten Sie keine zusätzliche Klasse hinzufügen? – 6134548

hier gehen Sie Sir

.slider li, 
 
.slider ul > .current ~ .current { opacity: 0.3; } 
 

 
.slider li.center.active, 
 
.slider ul > .current { opacity: 1; }

<div class="slider"> 
 
    <ul> 
 
     <li>...</li> 
 
     <li class="current">...</li> 
 
     <li class="center active">...</li> 
 
     <li class="current">...</li> 
 
     <li>...</li> 
 
    </ul> 
 
</div>

Quelle

2016-03-31 12:54:39 omarCreativeDev

CSS bezogen; Targeting eine spezielle li-Klasse

Antwort

Verwandte Themen