HTML与CSS：如何样式表中的字体？

Question

我有一些HTML代码：

<table class="hometable"> 
    <tbody> 
    <tr> 
     <td>The quick brown fox jumps over the lazy dog.</td> 
    </tr> 
    </tbody> 
</table> 

与CSS：

table.hometable { 
    border-spacing: 2px 2px; 
    border-collapse: separate; 
    width: 100%; 
} 

table.hometable td { 
    vertical-align: top; 
    padding: 2px; 
} 

如何我强调这个词fox？

Answer 1

没有办法使用纯CSS，但可以将狐狸包装在span元素中，例如使用text-decoration: underline作为样式。

table.hometable { 
 
    border-spacing: 2px 2px; 
 
    border-collapse: separate; 
 
    width: 100%; 
 
} 
 

 
table.hometable td { 
 
    vertical-align: top; 
 
    padding: 2px; 
 
} 
 

 
table.hometable span {text-decoration: underline}

<table class="hometable"> 
 
    <tbody> 
 
    <tr> 
 
     <td>The quick brown <span>fox</span> jumps over the lazy dog.</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

给它一个span和应用border-bottom或text-decoration:underline：

table.hometable { 
 
    border-spacing: 2px 2px; 
 
    border-collapse: separate; 
 
    width: 100%; 
 
} 
 
table.hometable td { 
 
    vertical-align: top; 
 
    padding: 2px; 
 
} 
 
.one span { 
 
    border-bottom: 1px red solid 
 
} 
 
.two span { 
 
    text-decoration: underline red 
 
}

<table class="hometable one"> 
 
    <tbody> 
 
    <tr> 
 
     <td>The quick brown <span>fox</span> jumps over the lazy dog.</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<table class="hometable two"> 
 
    <tbody> 
 
    <tr> 
 
     <td>The quick brown <span>fox</span> jumps over the lazy dog.</td> 
 
    </tr> 
 
    </tbody> 
 
</table>