Question

我试图避免使用<span style="font:10px Arial">内联而只是从我的CSS中提取，因为我知道我将在我的网站的第二阶段更改此内容。在我的消息提示结束时，我试图从CSS调用.signature，但似乎我无法突破泡沫消息部分。

我的代码

＆＃13;

<style>
.tipbox {
    width: 75%;
    margin: auto;
}

.bubble{
    background-color: #727272;
    border-radius: 10px;
    box-shadow: 0 0 6px #B2B2B2;
    display: inline-block;
    padding: 10px 18px;
    position: relative;
    vertical-align: top;
}

.bubble::before {
    background-color: #727272;
    content: "\00a0";
    display: block;
    height: 11px;
    position: absolute;
    top: 20px;
    transform:             rotate( 29deg ) skew( -55deg );
        -moz-transform:    rotate( 29deg ) skew( -55deg );
        -ms-transform:     rotate( 29deg ) skew( -55deg );
        -o-transform:      rotate( 29deg ) skew( -55deg );
        -webkit-transform: rotate( 29deg ) skew( -55deg );
    width:  30px;
}

.message {
    float: center;   
    margin: 5px 45px 5px 20px; 
    color:#FFFFFF;
    font-family: Impact, Georgia, Serif;
}

.message::before {
    box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
    left: -9px;           
}
         
}
.signature {
	font:10px Arial, Verdana, sans-serif;
}
	
</style>

＆＃13;

<div class="tipbox"><div class="bubble message">This is a very long line of text with a bunch of blah blah blah foo bar lah blah blah foo bar, see how I wrap around the box<span class="signature"> - love box</span></div></div>

<br>
<br>
<br>
<div class="tipbox"><div class="bubble message">This is a very long line of text with a bunch of blah blah blah foo bar lah blah blah foo bar, see how I wrap around the bo<span style="font:10px Arial"> - love box</span></div></div>

＆＃13;

Answer 1

~~只需将display:block;添加到CSS的.signature部分。~~

再看一下，你在.signature部分上面看起来似乎是额外的}导致你的问题。删除它，它应该工作。

如何使用已经使用其他样式的CSS更改DIV框中的文本字体样式

1 个答案: