Home > Article > Web Front-end > 如何让一个类选择器同时调用两个class值_html/css_WEB-ITnose
如何让一个类选择器同时调用两个class值_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:57:381799browse
| 姓名 | 性别 | 年龄 | 名族 |
|---|---|---|---|
| 张峰 | 男 | 19 | 汉族 |
| 李惠 | 女 | 18 | 回族 |
请教一下为什么表格th部分没有变色，只是td部分变了，如何让一个类选择器同时调用两个class值
回复讨论(解决方案)
如何让类选择器的th部分也发挥作用
.fancy th{ color:#f60;background:#666;}
.fancy td{ color:#f60;background:#666;}
=》改成下面的。因为是class .table 里面的th td
.table .fancy th{ color:#f60;background:#666;}
.table .fancy td{ color:#f60;background:#666;}
.fancy th{ color:#f60;background:#666;}
.fancy td{ color:#f60;background:#666;}
=》改成下面的。因为是class .table 里面的th td
.table .fancy th{ color:#f60;background:#666;}
.table .fancy td{ color:#f60;background:#666;}
还是不行，表头部分颜色没改变。另外，我想问一下，.table是默认的类选择器么即便没有给它命名定义，好比fancy我得事先在上面声明一下，.table不用声明直接就可以拿来用么
@kongwei521
.fancy th{ color:#f60;background:#666;}
.fancy td{ color:#f60;background:#666;}
=》改成下面的。因为是class .table 里面的th td
.table .fancy th{ color:#f60;background:#666;}
.table .fancy td{ color:#f60;background:#666;}
4楼的疑问明白了，自己声明的table类给忘了。但问题是现在表头部分还没变化，什么原因，求解
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> .table .fancy th {color: #f60;background: #666;} .table .fancy td { color: #f60;background: #666; } .table { border: 1px dotted #000; } </style></head><body> <form id="form1" runat="server"> <table class="table" border="1"> <!--第一行--> <tr class="fancy"> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>名族</th> </tr> <!--第二行--> <tr class="fancy"> <td>张峰</td> <td>男</td> <td>19</td> <td>汉族</td> </tr> <!--第三行--> <tr class="fancy"> <td>李惠</td> <td>女</td> <td>18</td> <td>回族</td> </tr> </table> </form></body></html>
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> .table .fancy th {color: #f60;background: #666;} .table .fancy td { color: #f60;background: #666; } .table { border: 1px dotted #000; } </style></head><body> <form id="form1" runat="server"> <table class="table" border="1"> <!--第一行--> <tr class="fancy"> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>名族</th> </tr> <!--第二行--> <tr class="fancy"> <td>张峰</td> <td>男</td> <td>19</td> <td>汉族</td> </tr> <!--第三行--> <tr class="fancy"> <td>李惠</td> <td>女</td> <td>18</td> <td>回族</td> </tr> </table> </form></body></html> 我把你的代码删减如下样子：
| 姓名 | 性别 | 年龄 | 名族 |
|---|---|---|---|
| 张峰 | 男 | 19 | 汉族 |
| 李惠 | 女 | 18 | 回族 |
依旧能让th部分变色：
但我自己写的同样的代码，却还是不能改变：
真搞不懂
真搞不懂
你少了nbsp;html> 这个吧
真搞不懂
加上了也不行，chrome和IE浏览器都不行,这是我的代码：
<!DOCTYPE html><html><head> <style> <!--类选择器--> .table .fancy th { color:#f60; background:#666; } .table .fancy td { color:#f60; background:#666; } .table { border:1px dotted #000; } </style></head><body> <form> <table class="table" border="1"> <!--第一行--> <tr class="fancy" > <th>姓名</th> <th>性别</th> <th>年龄</th> <th>名族</th> </tr> <!--第二行--> <tr class="fancy"> <td>张峰</td> <td>男</td> <td>19</td> <td>汉族</td> </tr> <!--第三行--> <tr class="fancy"> <td>李惠</td> <td>女</td> <td>18</td> <td>回族</td> </tr> </table> </form></body></html> 你直接复制粘贴运行看结果如何，反正我机子上不行，纠结。。。
把 //html的注释
=》
改成 /*类选择器*/
你直接复制粘贴运行看结果如何，反正我机子上不行，纠结。。。
把 //html的注释
=》
改成 /*类选择器*/
你直接复制粘贴运行看结果如何，反正我机子上不行，纠结。。。
把 //html的注释
=》
改成 /*类选择器*/
css中注释要用/*注释内容*/ 这样的格式对吧，之前看到过，以为是只在外联的css中才这样用，所以没留意，thank you！