Home >Web Front-end >HTML Tutorial >How to make a class selector call two class values at the same time_html/css_WEB-ITnose
How to make a class selector call two class values at the same time_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:57:381873browse
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
c9ccee2e6ea535a969eb3f532ad9fe89
b15fbcd88bb316c0d05559ddf91d6d8f
.fancy th{
color:#f60 ;
background:#666;
}
.fancy td{
color:#f60;
background:#666;
}
.table{
border :1px dotted #000;
}
531ac245ce3e4fe3d50054a55f265927
93f0f5c25f18dab9d176bd4f6de5d30e
6c04bd5ca3fcae76e30b72ad730ca86d
61e8ab2c4083c25f51d85ce968ba5aec
< ;table class="table" border="1">
5d14a0ad5872fb0b873539eb1a3921d6
570af190ae76ea3c1973a02e5f657c2a
b4d429308760b6c2d20d6300079ed38eName 01c3ce868d2b3d9bce8da5c1b7e41e5b
b4d429308760b6c2d20d6300079ed38eGender01c3ce868d2b3d9bce8da5c1b7e41e5b
b4d429308760b6c2d20d6300079ed38eAge01c3ce868d2b3d9bce8da5c1b7e41e5b
b4d429308760b6c2d20d6300079ed38eEthnicity01c3ce868d2b3d9bce8da5c1b7e41e5b
5194ba175fd9c71e9a9f6e68244d73a8
b0f34954d6d6f66a86d67038cefb2fce
3cdae710c5eebbaf635523220c34cd34
b6c5a531a458a2e790c1fd6421739d1cZhang Fengb90dd5946f0946207856a8a37f441edf
0f2d6b6549b1008808c133931ec1a1c9Maleb90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c19b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1cHanb90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
36887f954aa02214dc8ae32ec0078f92
3cdae710c5eebbaf635523220c34cd34
b6c5a531a458a2e790c1fd6421739d1cLi Huib90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1cFemaleb90dd5946f0946207856a8a37f441edf
0f2d6b6549b1008808c133931ec1a1c918b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1cHuib90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
f16b1740fad44fb09bfe928bcc527e08
36cc49f0c466276486e50c850b7e4956
38cfdec836742c2ff0d15d10ead67f5d
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>
<!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> 我把你的代码删减如下样子：
100db36a723c770d327fc0aef2ce13b1
7368e73479d7c1f252f9ce199bd61d0f
c9ccee2e6ea535a969eb3f532ad9fe89
.table .fancy th {color: #f60;background: #666;}
.table .fancy td { color: #f60;background: #666; }
.table { border: 1px dotted #000; }
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
2e3e94da6a2b2e68358797dd86722838
244da216e3d7ed09ae6c239c82c48a45
d7a2eff0514d58cfa81ef9ae5a083f23
b4d429308760b6c2d20d6300079ed38e姓名01c3ce868d2b3d9bce8da5c1b7e41e5b
b4d429308760b6c2d20d6300079ed38e性别01c3ce868d2b3d9bce8da5c1b7e41e5b
b4d429308760b6c2d20d6300079ed38e年龄01c3ce868d2b3d9bce8da5c1b7e41e5b
b4d429308760b6c2d20d6300079ed38e名族01c3ce868d2b3d9bce8da5c1b7e41e5b
fd273fcf5bcad3dfdad3c41bd81ad3e5
90679237c38f04bf74d4bb43bdd6aac3
d7a2eff0514d58cfa81ef9ae5a083f23
b6c5a531a458a2e790c1fd6421739d1c张峰b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c男b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c19b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c汉族b90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
9240692b31d4b668a2432e4e1129ac98
d7a2eff0514d58cfa81ef9ae5a083f23
b6c5a531a458a2e790c1fd6421739d1c李惠b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c女b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c18b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c回族b90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
f16b1740fad44fb09bfe928bcc527e08
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
依旧能让th部分变色：
但我自己写的同样的代码，却还是不能改变：
真搞不懂
真搞不懂
你少了76c82f278ac045591c9159d381de2c57 这个吧
真搞不懂
加上了也不行，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> 你直接复制粘贴运行看结果如何，反正我机子上不行，纠结。。。
Change the comment of 951a550294b46ee0fc6c7e47c7a773f1 //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 951a550294b46ee0fc6c7e47c7a773f1 //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 951a550294b46ee0fc6c7e47c7a773f1 //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!