覆盖* CSS页面中的CSS属性

Question

I am learning ionic. In my app I want to make the font of linkbutton to 12 px, however it is overridden by other css. My scss file has following css for linkbutton:

  .link_button {
  color: $myColor;
  font-size: 12px;
  text-decoration: underline;
  bottom:10px;
  }

How can I make above scss to be implied forcibly on top of others ?

This is how text looks:

CSS which is implied in actual(got from chrome tool):

After suggestion from folks here I modified my scss file with both Id and Important it did not work. When using important:(And same happens even if I do via Id)

Answer 1

You can either add a ID to the link button and specify the style using ID. This is because ID takes precedence over class styles

#linkButton { Font-size:12px; } #linkButton { Font-size:12px; } Or you can use !important which will over write all other css styles. But be careful when you use it .linkButton { Font-size:12px !important; } .linkButton { Font-size:12px !important; }

Answer 2

The best is not to use !important but to increase specificity. https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Answer 3

It was ionic-button who was adding button-inner class and it had default font size. More on here:

css code doesn't apply to button in ionic 2