html - 为 h3 元素的特定部分设置样式

Question

我当前的 html:

<section class="menu-group">
                    <h2 class="menu-group-name">Appetizers</h2>
                        <div class="menu-item-line">
                            <h3 class="menu-item">Battered Cauliflower(GF,SF), Tofu (GF), or Kalebone (SF)</h3>
                            <h3 class="menu-item-price">$3.90/ea</h3>
                        </div>
                        <div class="menu-item-line">
                            <h3 class="menu-item">Herb Potatoes (GF)</h3>
                            <h3 class="menu-item-price">$3.50</h3>
                        </div>
                        <p class="item-desc">A tasty order of our baked seasoned potatoes</p>

                        <div class="menu-item-line">
                            <h3 class="menu-item">Eggless Bowl (GF)</h3>
                            <h3 class="menu-item-price">$3.00</h3>
                        </div>
                            <p class="item-desc">Our most popular eggless salad served chilled with whole wheat crackers</p>    
                </section>

和相关的CSS:

.menu-item, .menu-item-price {
    font-family: 'Francois One', sans-serif;
    font-size: 18px;
    margin: .5em 0;
    color: black;
    display: inline-block;      
}

.menu-item {
    max-width: 300px;
}

.menu-item-price  {
    float: right;
    /*margin: 0 0 0 5px;*/
}

.item-desc {
    font-family: 'Open Sans', sans-serif;       
    color: black;
    font-size: 18px;
    /*float: left;*/
    max-width: 300px;
    /*font-style: italic;*/
    margin: 0;
}

有没有办法使用 css 获取所有“(GF,SF)”(以及“___free”的所有其他排列)并使文本稍微变小？除了更改标记外，我找不到其他方法。谢谢

Answer 1

是的，你可以在不改变标记的情况下做到这一点，但你必须为此使用 javascript 或 jquery.. 但如果你只是坚持使用 css 来完成它，你将不得不改变标记.. 需要捕获它<span>并使用 h3 > span并给出新的字体大小