不继承父 div 字体大小的按钮

Question

使用 React，我有一个像这样的块：

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

我添加的样式如下

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

这适用于值，但 + 和 - 符号不会变大。添加

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

使字体变大。为什么div 风格不被孩子继承？

Answer 1

大多数表单元素（input, select, textarea, button）默认情况下不会继承CSS中的字体属性，您必须指定它。 http://jsfiddle.net/pEedc/184/

Answer 2

你将不得不像这样使用属性选择器

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

您需要编写多个带有单独逗号的选择器才能在div 和按钮上应用相同的字体大小，请检查下面的代码片段：

#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>

Answer 3

将

className更改为class然后您可以更改字体

   #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>