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>