如何解决如何在CSS中的TD内设置特定元素的样式
示例:我想在style.css文件中设置该元素的样式
<table>
<thead>...</thead>
<tbody id="something">
<tr class="highlight_on_hover" id="1">
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>
<a href="#">Link</a>
<a href="#">The element I want to style.</a>
</td>
</tr>
<tr class="highlight_on_hover" id="2">
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>
<a href="#">Link</a>
<a href="#">The element I want to style.</a>
</td>
</tr>
</tbody>
<table>
我想使用CSS选择器为style.css文件中的元素设置样式
解决方法
根据您的示例结构
.highlight_on_hover td a:nth-child(2)
将完成它。
.highlight_on_hover td a:nth-child(2) {
background: lightblue;
}
<table>
<tbody id="something">
<tr class="highlight_on_hover" id="1">
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>
<a href="#">Link</a>
<a href="#">The element I want to style.</a>
</td>
</tr>
<tr class="highlight_on_hover" id="2">
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>
<a href="#">Link</a>
<a href="#">The element I want to style.</a>
</td>
</tr>
</tbody>
<table>
,
您可以通过为元素定义类名或id来设置特定元素的样式。
<tr class="highlight_on_hover" id="1">
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>
<a href="#" >Link</a>
<a href="#" class="link">The element I want to style.</a>
</td>
</tr>
style.css
.link {
color: blue;
text-decoration: underline;
}
,
如果您要设置所有<td>
标签的样式,请添加CSS
table td{ color:red; font-weight:bolder;}
此CSS将为您表格中的所有数据设置样式
或者如果您想设置特殊的<td>
元素的样式,请尝试
<table>
<tbody id="something">
<tr class="highlight_on_hover" id="1">
<td> <span style="color:red;"> Data 1 </span></td>
<td>Data 2</td>
<td>Data 3</td>
<td>
<a href="#">Link</a>
<a href="#">The element I want to style.</a>
</td>
</tbody> </table>
使用<span>
元素设置特殊元素的样式
我希望这会对您有所帮助
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。