首页 >web前端 >html教程 >如何让一个类选择器同时调用两个class值_html/css_WEB-ITnose

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

WBOY
WBOY原创
2016-06-24 11:57:381854浏览





























姓名 性别 年龄 名族
张峰 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> 这个吧


真搞不懂

 你少了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!
声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn