如何让一个类选择器同时调用两个class值_html/css

如何让一个类选择器同时调用两个class值_html/css_WEB-ITnose

WBOY

发布： 2016-06-24 11:57:38

原创

1853 人浏览过

姓名	性别	年龄	名族
张峰	男	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;}

还是不行，表头部分颜色没改变。另外，我想问一下，.table是默认的类选择器么即便没有给它命名定义，好比fancy我得事先在上面声明一下，.table不用声明直接就可以拿来用么

@kongwei521

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部分变色：

但我自己写的同样的代码，却还是不能改变：

真搞不懂

真搞不懂

你少了这个吧

真搞不懂

你少了这个吧

加上了也不行，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！