ホームページ > ウェブフロントエンド > htmlチュートリアル > クラスセレクターで 2 つのクラス値を同時に呼び出す方法_html/css_WEB-ITnose

クラスセレクターで 2 つのクラス値を同時に呼び出す方法_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:57:38
オリジナル
1853 人が閲覧しました

<< lt;




<--2行目--> tr class="ファンシー">







理由を教えてくださいテーブルの 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 階質問は理解できましたが、宣言したテーブル クラスのことを忘れていました。しかし、問題はヘッダー部分がまだ変更されていないことです。なぜですか?解決してください。

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


 
     


    
          
名前 性別 張鳳 19
女性 18

               
               
                    
                    
                    
                    
               
               
               
                    
                    
                    
                    
               
               
               
                    
                    
                    
                    
               
          
姓名 性别 年龄 名族
张峰 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>
ログイン後にコピー

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

//html
=》
を /*Class Selector*/ に変更します

とにかく、結果を確認するには、コピーして貼り付けて実行するだけです。私のマシンでは動作しません。 。 。


//html
=》
のコメントを /*Class Selector*/ に変更します


コピーして貼り付けて実行すると、結果がわかります。とにかく、私のマシンではそれができず、混乱しています。 。 。


//html コメント
=》
を /*Class Selector*/ に変更します

CSS 内のコメントは /*Comment content*/ の形式を使用する必要があります。以前見たことがあって、外部 CSS でのみ使用されているものだと思っていたので、気に留めていませんでした。ありがとうございます。
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート