我现在的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”的所有其他排列)并使文本稍微变小?除了改变标记,我找不到方法。感谢
答案 0 :(得分:1)
是的,你可以不改变标记,但你必须使用javascript或jquery ...但如果你只是坚持使用CSS来完成它,你将不得不改变标记..需要捕获它<span>
并使用h3 > span
并提供新的字体大小
答案 1 :(得分:1)
您可以尝试将每个缩写包装在abbr
标记中,然后使用title属性提供缩写含义的关键字。
参考:http://www.w3.org/TR/html-markup/abbr.html#abbr
然后,您可以为abbr
定义CSS规则,以根据需要设置样式。
关于开括号和右括号,可以使用带伪元素的第一个子句和最后一个子选择器。
<abbr title="Good Food">GF</abbr>