ホームページ > 記事 > ウェブフロントエンド > クラスセレクターで 2 つのクラス値を同時に呼び出す方法_html/css_WEB-ITnose
クラスセレクターで 2 つのクラス値を同時に呼び出す方法_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:57:381837ブラウズ
＆lt;＆lt; lt;
916a9b4134b7e38957c999f034205003 58c2974133218223bf3786e0dcb1bf55名前01c3ce868d2b3d9bce8da5c1b7e41e5b b4d429308760b6c2d20d6300079ed38e性別01c3ce868d2b3d9bce8da5c1b7e41e5b
b4d429308760b6c2d20d6300079ed38e名01c3ce868d2b3d9bce8da5c1b7e41e5b
e8220acc555ff0257d34a329e876fc29 tr class="ファンシー">
b6c5a531a458a2e790c1fd6421739d1c張鳳b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c19b90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
b6c5a531a458a2e790c1fd6421739d1c女性b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c18b90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
73a6ac4ed44ffec12cee46588e518a5e理由を教えてくださいテーブルの th 部分の色は変わっていませんが、td 部分だけが変わりました。 クラスセレクターで 2 つのクラス値を同時に呼び出す方法
ディスカッションへの返信 (解決策)
クラスセレクターの th 部分も機能させる方法
.fancy th{ color:#f60;background:#666;}
.fancy td{ color:#f60;background:#666 ;}
=》Change以下へ。それはクラス .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;}
=》以下に変更します。それはクラス .table の th td であるため
.table .fancy th{ color:#f60;background:#666;}
.table .fancy td{ color:#f60;background:#666;}
まだ動作していますが、ヘッダー部分の色は変わりません。さらに聞きたいのですが、.table はデフォルトのクラスセレクターで、空想などで名前を付けて定義していない場合でも、.table を宣言せずに直接使用することはできますか? @kongwei521
.fancy th{ color:#f60;background:#666;}
.fancy td{ color:#f60;background:#666;}
=》以下に変更します。クラス .table の th td なので
.table .fancy th{ color:#f60;background:#666;}
.table .fancy td{ color:#f60;background:#666;}
4 階質問は理解できましたが、宣言したテーブル クラスのことを忘れていました。しかし、問題はヘッダー部分がまだ変更されていないことです。なぜですか?解決してください。
我把你的代码删减如下样子：
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> 你直接复制粘贴运行看结果如何，反正我机子上不行，纠结。。。
951a550294b46ee0fc6c7e47c7a773f1 //html
=》
を /*Class Selector*/ に変更します
とにかく、結果を確認するには、コピーして貼り付けて実行するだけです。私のマシンでは動作しません。 。 。
951a550294b46ee0fc6c7e47c7a773f1 //html
=》
のコメントを /*Class Selector*/ に変更します
コピーして貼り付けて実行すると、結果がわかります。とにかく、私のマシンではそれができず、混乱しています。 。 。
951a550294b46ee0fc6c7e47c7a773f1 //html コメント
=》
を /*Class Selector*/ に変更します
CSS 内のコメントは /*Comment content*/ の形式を使用する必要があります。以前見たことがあって、外部 CSS でのみ使用されているものだと思っていたので、気に留めていませんでした。ありがとうございます。