Question

我在为p内的span元素创建不同的字体大小时遇到了麻烦。 p应该是一个更大的标题文本，并且跨度在它之后没有额外的间距，并且跨度文本将更小，颜色更浅。

我无法将范围文字缩小。它与p文本保持相同的大小。它们之间也有太多的空间，我也喜欢这些文字线彼此非常接近。

HTML ：

<p class="this-p">Hello<br><span class="this-span">Some text here</span></p>

LESS ：

.this-p {
    font-size:1.6em;
    font-weight: bold;
    .this-span {
        font-weight: lighter;
        font-size:0.9em !important;
        color: @gray;
    }
}

Answer 1

您的LESS按预期工作，如下所示：http://jsbin.com/mohur/1

但是在这些太多的文本之间仍然存在相当大的空间。

这是由于缺少line-height。它继承自body或浏览器默认值。要解决此问题：http://jsbin.com/mohur/2

.this-p {
    font-size:1.6em;
    line-height: .75em;
    font-weight: bold;
    .this-span {
        font-weight: lighter;
        font-size: 0.9em;
        color: gray;
    }
}

小心ems处理嵌套大小可能会很棘手。

小心line-height。如果文本转到两行，则可能会遇到问题。

我认为更好的方法是：http://jsbin.com/mohur/3

通过这种方式，您可以完全控制这两个元素，而不会从另一个元素继承。

Answer 2

像这样更改你的CSS

.this-p 
{
    font-size:1.6em;
    font-weight: bold;
}
.this-span 
{
        font-weight: lighter;
        font-size:0.9em !important;
        color: gray;
}

DEMO

Answer 3

从p区块中取出分支范围......

.this-p {
    font-size:1.6em;
    font-weight: bold;
}
.this-span {
    font-weight: lighter;
    font-size:0.9em !important;
    color: @gray;
}

我可能错了，但在CSS中没有这样的分支...总是有单独设计的元素......除了SASS，当然......

Answer 4

除非使用SASS模型，否则无法嵌套这些CSS。

单独保存它们会有所帮助。

.this-p {
   font-size:1.6em;
   font-weight: bold;
}

.this-span {
   font-weight: lighter;
   font-size:0.9em !important;
   color: @gray;
}

Answer 5

你在CSS中做错了。如下所示，并确保关闭<p>标记

.this-p {
    font-size:1.6em;
    font-weight: bold;
}
    .this-span {
        font-weight: lighter;
        font-size:0.9em !important;
        color: @gray;
    }

查看 FIDDLE

p内部不同的字体大小到span标签

5 个答案: