应用标记两次会导致不同的CSS样式

时间:2014-07-01 09:00:46

标签: html css

<h1>Some text <small><small>here</small></small></h1>

结果

enter image description here

<h1>Some text <small>here</small></h1>

结果

enter image description here

并且我希望第一个带有here个小字,但没有双<small>个标签,因此可以编写任何规则来应用两次而不创建新规则或触摸现有的元素? 目前使用的<small>代码规则是

h1 small, .h1 small, h2 small, .h2 small, h3 small, .h3 small, h1 .small, .h1 .small, h2 .small, .h2 .small, h3 .small, .h3 .small { font-size: 65%; } 注意:问题的关键是可以在不创建或触摸现有元素样式的情况下应用样式两次。 例如,让我们说<a>Foods</a> and <a class="twice">Cars</a> 会成为 enter image description here

因此可以在任何地方使用twice来应用双重样式(将字体缩小两次或更大两次,或者将两次透明度调整为两倍,或者两次使用增加两倍,填充两次等等)。

2 个答案:

答案 0 :(得分:1)

我没有看到CSS ofcourse,但很可能(当使用浏览器代理样式时)<small>标记被定义为em值,这是一个相对值。所以你基本上对浏览器说:make this text 80% of 80% of the original(或者em值是什么)。

现在,如果您只想拥有一个小标签,并且结果相同,则应该为其应用样式:

<强> CSS

small.extra-small { font-size: 0.2em; /* some extra small font size value */ } 

<强> HTML

<small class="extra-small">This text is tiny!</small>

你的问题是:我可以不改变任何东西吗?答案是不。因为在世界上任何地方你都可以在不触碰它的情况下改变一些东西(或者你应该是上帝;)。)。

答案 1 :(得分:0)

小将默认font-size设置为75%,当您有两个small时,结果字体大小为.75 * 75%。

使用两个small元素不是正确的方法,使用类来设置超小字体,或者其他什么。不是两个small元素。

如果您想使用当前的HTML,只需重置内部font-size的{​​{1}}:

small