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并提供新的字体大小

Answer 2

您可以尝试将每个缩写包装在abbr标记中，然后使用title属性提供缩写含义的关键字。

参考：http://www.w3.org/TR/html-markup/abbr.html#abbr

然后，您可以为abbr定义CSS规则，以根据需要设置样式。

关于开括号和右括号，可以使用带伪元素的第一个子句和最后一个子选择器。

<abbr title="Good Food">GF</abbr>

h3元素的样式特定部分

2 个答案: