设置除< h1>之外的所有文字的字体大小< H2>等等 [英] Setting font-size for all text except <h1> <h2> etc

问题描述

我将CSS应用于可能包含< div> < table> < p> 和其他元素，并且只是纯文本。

我希望所有的文字都是相同的字体大小，但标签内的文字例外如< h1> < h2> < h3>

使用objectidmybox，我的简单CSS字体修饰符是

  .mybox * {
 font-size：13px; 
} 
  

问题在于，这也会为任何< h2> 元素等等。
我可以为我的< h2> 元素和另一个选择器添加一个类，以重新覆盖字体大小，但感觉非常倒退。

什么是处理这个问题的好方法？

我找到了适用于类的not（）选择器，但是我找不到像< h2> 这样的html元素，以便将它们从我的全局字体修饰符中排除。

解决方案

使用 ：不是 选择器与这些不需要的元素：

.mybox *：not（h1）：not（h2）：not（h3）{font-size：13px;}

 < div class =mybox> < H1> FOO< / H1> < H2>巴≤; / H2> < H3>汉斯< / H3> <标签>&格鲁伯LT; /标签> < p为H.悟空< / p为H. < div> Yoda< / div>< / div>  

b
$ b

JSFiddle

I'm applying CSS to a box of my page which may contain <div> <table> <p> and other elements, and just plain text.

I want all the text to be the same font size, with exception for text within tags such as <h1> <h2> <h3>

With objectid "mybox" my simple CSS font modifier was

.mybox * {
font-size: 13px;
}

The problem is that this also sets the font for any <h2> elements and so on. I could add a class to my <h2> elements and another selector to override the font size again, but that feels very backwards.

What is a good way to take care of this?

I found the not() selector which works for classes, but I couldn't find one for html elements like <h2> to exclude them from my "global" font modifier.

解决方案

Use the :not selector with those "unwanted" elements:

.mybox *:not(h1):not(h2):not(h3) {
  font-size: 13px;
}

<div class="mybox">
  <h1>foo</h1>
  <h2>bar</h2>
  <h3>Hans</h3>
  <label>Gruber</label>
  <p>Goku</p>
  <div>Yoda</div>
</div>

JSFiddle

这篇关于设置除< h1>之外的所有文字的字体大小< H2>等等的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！