Tasten nicht Elternteil div font-size

Question

vererben Reagieren Verwendung, ich habe einen Block wie:

<div id="main"> 
    0 
    <button className="counter-button" onClick={this.increment}>+</button> 
    <button className="counter-button" onClick={this.decrement}>-</button> 
    </div> 

ich einen Stil wie

 #main { 
      margin: 20px; 
      font-size: 18px; 
     } 

Dies funktioniert auf dem Wert hinzufügen, aber die + und - Zeichen werden nicht größer. Hinzufügen

 .counter-button { 
      margin-left: 10px; 
      height: 40px; 
      width: 40px; 
      font-size: 18px; 
     } 

macht die Schrift größer. Warum wird der Div-Stil nicht von Kindern geerbt? danke

Answer 1

Die meisten Formularelemente (input, select, textarea, button) erben Schriftarteigenschaften in CSS nicht standardmäßig, Sie müssen es angeben. http://jsfiddle.net/pEedc/184/

Answer 2

Ihre className-class ändern, dann können Sie die Schrift

#main { 
 
      margin: 20px; 
 
      font-size: 18px; 
 
     } 
 
    #main .counter-button{ 
 
     font-size:35px; 
 
    } 
 
     .counter-button { 
 
      margin-left: 10px; 
 
      height: 40px; 
 
      width: 40px; 
 
      }

<div id="main"> 
 
    0 
 
    <button class="counter-button" onClick={this.increment}>+</button> 
 
    <button class="counter-button" onClick={this.decrement}>-</button> 
 
    </div>

ändern

Answer 3

Sie Attributselektor wie diese

[className='counter-button'] { 
     font-size: 35px; 
    } 

Sie müssen verwenden müssen schreiben mehrere Wähler mit separatem Komma gelten gleiche Schriftgröße auf div und Knopf, überprüfen Sie das folgende Snippet:

#main { 
 
    margin: 20px; 
 
} 
 
[className='counter-button'] { 
 
    margin-left: 10px; 
 
    height: 40px; 
 
    width: 40px; 
 
} 
 
/*For equal font size for both*/ 
 

 
#main, 
 
[className='counter-button'] { 
 
    font-size: 35px; 
 
}

<div id="main"> 
 
    0 
 
    <button className="counter-button" onClick={this.increment}>+</button> 
 
    <button className="counter-button" onClick={this.decrement}>-</button> 
 
</div>