ホームページ  >  記事  >  ウェブフロントエンド  >  1 つの HTML 内の 2 つのテーブルは 2 つのスタイルを設定しますが、同じ_html/css_WEB-ITnose を適用します

1 つの HTML 内の 2 つのテーブルは 2 つのスタイルを設定しますが、同じ_html/css_WEB-ITnose を適用します

WBOY
WBOYオリジナル
2016-06-24 12:16:391558ブラウズ

代码如下:
b585974ae3b7dba3039af53a9593f9c4
383eb734b02b508089ba2d78eb4c6f68
93f0f5c25f18dab9d176bd4f6de5d30e
0f3eabac747cdf61a51589c5584ae6e8
b2386ffb911b14667cb8f0f91ea547a7表格6e916e0f7d1e588d4f442bf645aedb2f
46d5fe1c7617e3914f214aaf043f4ccf
#dc table {
border: 1px solid #0F0;
}
#dc tr,th,td {
border: 1px solid #0F0;
}
#cd {
margin-top: 20px;
}
#cd table {
border-collapse: collapse;
}
#cd table tr,th,td {
border: 1px solid #F00;
}
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d
123753e672dc9af2d303731a6e69d5e2
f5d188ed2c074f8b944552db028f98a1
  a34de1251f0d9fe1e645927f19a896e8
    b4d429308760b6c2d20d6300079ed38e这个表格是绿色边框01c3ce868d2b3d9bce8da5c1b7e41e5b
    b4d429308760b6c2d20d6300079ed38e这个表格是绿色边框01c3ce868d2b3d9bce8da5c1b7e41e5b
  fd273fcf5bcad3dfdad3c41bd81ad3e5
  a34de1251f0d9fe1e645927f19a896e8
    b6c5a531a458a2e790c1fd6421739d1c这个表格是绿色边框b90dd5946f0946207856a8a37f441edf
    b6c5a531a458a2e790c1fd6421739d1c这个表格是绿色边框b90dd5946f0946207856a8a37f441edf
  fd273fcf5bcad3dfdad3c41bd81ad3e5
f16b1740fad44fb09bfe928bcc527e08
16b28748ea4df4d9c2150843fecfba68
19c7dfe18c057ffb252aab4564715b2f
  f5d188ed2c074f8b944552db028f98a1
  a34de1251f0d9fe1e645927f19a896e8
    b4d429308760b6c2d20d6300079ed38e这个表格是红色边框01c3ce868d2b3d9bce8da5c1b7e41e5b
    b4d429308760b6c2d20d6300079ed38e这个表格是红色边框01c3ce868d2b3d9bce8da5c1b7e41e5b
  fd273fcf5bcad3dfdad3c41bd81ad3e5
  a34de1251f0d9fe1e645927f19a896e8
    b6c5a531a458a2e790c1fd6421739d1c这个表格是红色边框b90dd5946f0946207856a8a37f441edf
    b6c5a531a458a2e790c1fd6421739d1c这个表格是红色边框b90dd5946f0946207856a8a37f441edf
  fd273fcf5bcad3dfdad3c41bd81ad3e5
f16b1740fad44fb09bfe928bcc527e08
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
这是效果图:


回复讨论(解决方案)

b585974ae3b7dba3039af53a9593f9c4
383eb734b02b508089ba2d78eb4c6f68
93f0f5c25f18dab9d176bd4f6de5d30e
0f3eabac747cdf61a51589c5584ae6e8
b2386ffb911b14667cb8f0f91ea547a7无标题文档6e916e0f7d1e588d4f442bf645aedb2f
c9ccee2e6ea535a969eb3f532ad9fe89
#dc table {
border: 1px solid #0F0;
}
#dc tr,th {
border: 1px solid #0F0;
}
#cd {
margin-top: 20px;
}
#cd table {
border-collapse: collapse;
}
#cd table tr,td {
border: 1px solid #F00;
}

531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
123753e672dc9af2d303731a6e69d5e2
f5d188ed2c074f8b944552db028f98a1
  a34de1251f0d9fe1e645927f19a896e8
    b4d429308760b6c2d20d6300079ed38e这个表格是绿色边框01c3ce868d2b3d9bce8da5c1b7e41e5b
    b4d429308760b6c2d20d6300079ed38e这个表格是绿色边框01c3ce868d2b3d9bce8da5c1b7e41e5b
  fd273fcf5bcad3dfdad3c41bd81ad3e5
  a34de1251f0d9fe1e645927f19a896e8
    b4d429308760b6c2d20d6300079ed38e这个表格是绿色边框01c3ce868d2b3d9bce8da5c1b7e41e5b
    b4d429308760b6c2d20d6300079ed38e这个表格是绿色边框01c3ce868d2b3d9bce8da5c1b7e41e5b
  fd273fcf5bcad3dfdad3c41bd81ad3e5
f16b1740fad44fb09bfe928bcc527e08
16b28748ea4df4d9c2150843fecfba68
85c50241f0eb8741742bfaba3ddacd81
a34de1251f0d9fe1e645927f19a896e8このテーブルには赤い枠がありますb6c5a531a458a2e790c1fd6421739d1c td>
fd273fcf5bcad3dfdad3c41bd81ad3e5

16b28748ea4df4d9c2150843fecfba68
73a6ac4ed44ffec12cee46588e518a5e

#dc table tr td,#dc table tr th{border: 1px solid #0F0;}#cd table tr td,#cd table tr th{border: 1px solid #F00;}


CSS 複合セレクターの使用法を理解します。上の 2 つのコードを見てください。

#dc tr,th,td {
border: 1px Solid #0F0; }
#cd table tr,th,td {

border: 1px Solid #F00; }

実際、2 つのセレクターはそれぞれ3 つを選択しました。1 つは #dc tr、1 つは th、もう 1 つは td です

CSS コード?1234567#dc table tr td,#dc table tr th{border: 1px Solid #0F0;}#cd table tr td,# cd table tr th{border: 1px Solid #F00;}

CSS 複合セレクターの使用法を理解します。上の 2 つのコードを見てください。
最初のものは、id dc の table 要素の下の tr 要素の下に含まれる td 要素と th 要素が宣言 {border: 1px Solid #0f0; を共有することを意味します
2 つ目は、最初のものと同じを意味しますが、 IDが違いますが、正しく理解できますか?
あなたが私に言いたいのは、私の複合セレクターが間違って書かれているということですか? #dc tr,td,th{border....} これは間違っていますか?

確かに、同じ ID の複合セレクターは次のように記述する必要があります。#dc th、#dc td {border...} は正しいです。 2階と3階は修正のためです。 1 階の友人にも感謝します (笑)。ただし、コードでは症状は処理されますが、根本的な原因は処理されません。テーブル効果は達成されていますが、最初のテーブルは th として記述され、2 番目のテーブルは td として記述されています。 all ヘッダー、これは私が望む最終結果ではありません

そうですね、これは確かに書き込みエラーです。同じ ID の下にある複合セレクターは次のように記述する必要があります: #dc th, #dc td {border.. .} は正しいです。修正してくれた 2 階と 3 階の友人に感謝します。 1 階の友人にも感謝します (笑)。ただし、コードでは症状は処理されますが、根本的な原因は処理されません。テーブル効果は達成されていますが、最初のテーブルは th として記述され、2 番目のテーブルは td として記述されています。すべて ヘッダー、それは私が望んでいる最終結果ではありません


どういたしまして、へへ

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。