Heim > Web-Frontend > HTML-Tutorial > 如何让一个类选择器同时调用两个class值_html/css_WEB-ITnose

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

WBOY
Freigeben: 2016-06-24 11:57:38
Original
1852 Leute haben es durchsucht





























姓名 性别 年龄 名族
张峰 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>
Nach dem Login kopieren
Nach dem Login kopieren

<!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>
Nach dem Login kopieren
Nach dem Login kopieren



我把你的代码删减如下样子:





























姓名 性别 年龄 名族
张峰 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>
Nach dem Login kopieren

你直接复制粘贴运行看结果如何,反正我机子上不行,纠结。。。

   把 //html的注释
=》
改成 /*类选择器*/

你直接复制粘贴运行看结果如何,反正我机子上不行,纠结。。。


   把 //html的注释
=》
改成 /*类选择器*/ 


你直接复制粘贴运行看结果如何,反正我机子上不行,纠结。。。


   把 //html的注释
=》
改成 /*类选择器*/ 

css中注释要用/*注释内容*/ 这样的格式对吧,之前看到过,以为是只在外联的css中才这样用,所以没留意,thank you!
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage