How to make a class selector call two class values at the same time_html/css

How to make a class selector call two class values at the same time_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:57:38

Original

1840 people have browsed it

< ;table class="table" border="1">

Name
Gender
Age
Ethnicity
< /tr>

Zhang Feng
< td>Male
19
Han

Li Hui
Female
< td>18
Hui

Please tell me why the th part of the table has not changed color, but only the td part has changed. How to make a class selector call two class values at the same time

Reply to discussion (solution)

How to make the th part of the class selector also work

.fancy th{ color:#f60;background:#666;}
.fancy td{ color:#f60;background:#666;}
=》Change to the following. Because it is th td in class .table
.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;}
=》Change to the following . Because it is th td in class .table
.table .fancy th{ color:#f60;background:#666;}
.table .fancy td{ color:#f60;background:#666;}

Still not working, the color of the header part has not changed. In addition, I would like to ask, is .table the default class selector? Even if it is not named and defined, like fancy, I have to declare it in advance. Can .table be used directly without declaring it?

@kongwei521

.fancy th{ color:#f60;background:#666;}
.fancy td{ color:#f60;background:#666;}
=》Change into the following. Because it is th td in class .table
.table .fancy th{ color:#f60;background:#666;}
.table .fancy td{ color:#f60;background:#666;}

I understand the question on the 4th floor. I forgot the table class I declared. But the problem is that the header part has not changed yet. Why?

<!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>

Copy after login

<!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>

Copy after login

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

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

Copy after login

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

Change the comment of //html
=》
to /*Class Selector*/

You can copy it directly Paste and run to see what the result is. Anyway, it doesn’t work on my machine, so I’m confused. . .

Change the comment of //html
=》
to /*Class Selector*/

Just copy and paste and run it to see what the result is. Anyway, it doesn’t work on my machine, so I’m confused. . .

Change the comment of //html
=》
to /*Class Selector*/

Comments in css should use the format of /*comment content*/, right? I have seen it before, and thought it was only used in external css, so I didn’t pay attention, thank you!