n-te-Kind Mit einem div stylen

ich folgendes Layout bekommen haben, muss ich die erste und die zweite div um Stil, die die Klasse bekommen hat threecolx aber ich brauche sie anders zu gestalten, ohne weitere Klassen zu ihnen hinzufügen.n-te-Kind Mit einem div stylen

HTML

<div class="threecolx mobile-hidden"> 
      <div class="contact-box"> 
       <span class="promo-text">Family run for over</span> 
       <span class="promo-date">- 30 Yrs -</span> 
      </div> 
      </div> 
      <div class="sixcolx"> 
      <!-- Desktop Logo --> 
      <div id="hdr-logo"> 
       <a href="{SELF_URL}" title="{SITE_NAME}"><img src="/img-src/{v2_FOLDER}/theme/logo.png" alt="{SITE_NAME}" class="responsive-img"/></a> 
      </div> 
      <!-- // END Desktop Logo --> 
      </div> 
      <div class="threecolx"> 
      <div class="contact-box"> 
       <!-- Social Icons --> 
       <div class="telephone"><a href="/contact.php" title="Contact Us"><span class="fa fa-phone"></span> {v2_TELEPHONE_NUMBER}</a></div> 
       <div class="email mobile-hidden"><a href="/contact.php" title="Email us"><span class="fa fa-map-marker"></span> Find Us</a></div> 
       <!-- // Social Icons --> 
      </div> 
      </div> 
      <div class="clearfix"></div>

Hier sind die Stile im mit, die gut funktionieren sollte!

@media screen and (max-width:1200px) { 
    #header .row { 
    .threecolx:nth-child(1) .contact-box { 
     float: right; 
    } 
    .threecolx:nth-child(2) .contact-box { 
     float: left; 
    } 
    } 
}

Derzeit wird nur die erste div mit der Klasse threecolx gestylt wird, bin ich falsch n-te-Kind mit?

Quelle

2016-05-23 Martyn Ball

Sie können Odd und Even alternativ verwenden, um ein Div zu stylen. –

Vielleicht sollten Sie statt dessen 'nth-of-type' verwenden. http://stackoverflow.com/questions/3203313/nth-child-doesnt-respond-to-class-selector –

Sie es richtig verwenden, kann es eine andere Art sein, die dies noch beeinflussen kann. Bitte überprüfe das Tool wie Firebug. Wenn es in einigen Online-Seite ist bitte die URL teilen prüfe ich und Sie wissen lassen. – yogihosting

Ja, n-te-Kind nicht ‚Filter‘ auf dem Selektor Sie sie haben Präfix mit.

Zum Beispiel, wenn Sie .threecolx:nth-child(2) eingeben, das bedeutet, dass Ihr Zielelement eine Klasse threecolx und soll das zweite Kind seiner Eltern sein sollte (nicht das zweite Element mit Klasse threecolx in einem übergeordneten Elemente!)

In Ihrem Beispiel sollte dreecolx: nth-child (3) mit Ihrem Ziel übereinstimmen, da es das dritte Kind des übergeordneten Objekts ist. (.sixcolx ist das zweite Kind).

Quelle

2016-05-23 09:45:33

Sie haben <div class="sixcolx"> zwischen dem .threecolx divs, so dass Ihre zweiten .threecolx nicht zweites aber drittes Kind ist

Here is jsFiddle

Quelle

2016-05-23 09:43:00 Buksy

n-te-Kind Mit einem div stylen

Antwort

Verwandte Themen