ホームページ > 記事 > ウェブフロントエンド > 1 つの HTML 内の 2 つのテーブルは 2 つのスタイルを設定しますが、同じ_html/css_WEB-ITnose を適用します
代码如下:
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
#dc table tr td,#dc table tr th{border: 1px solid #0F0;}#cd table tr td,#cd table tr th{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 ヘッダー、これは私が望む最終結果ではありません
どういたしまして、へへ