理由は、ブラウザによって決定されるデフォルトのCSSスタイルです。
input
とselect
デフォルト色/サイズ/パディングを持っているなど
- 他のほとんどの要素は、色とサイズのため
inherit
を使用しています。
- もう1つの例は、フォントサイズが
table
で、デフォルトでは継承されず、固定されており、開発者が上書きする必要があります。 <html>
<style type="text/css">
body { color:red; font-size:36px; }
</style>
<body>
Hello
<input type="text" value="test value"/>
<table><tr><td>cell value</td></tr></table>
</body>
</html>
あなたがfont-size
とcolor
input
によって継承されていなかったことがわかります。
は、この例のHTMLを試してみてください。また、セルの値は既定のフォントサイズのままでした。今style
ブロックに次のCSSを追加します。
input { color:inherit; font-size:inherit; }
table { font-size:inherit; }
あなたは今、期待どおりに継承することがわかります。
あなたが本当にやりたいことは、リセットスタイルシートを使用することです。テーブルは、多くの開発者にとって望ましくない既定のスタイルが付加された要素の1つで、すべてのブラウザが若干異なる場合があります。これは多くの人がリセットcssスタイルシートを使用する理由です。これらのスタイルシートは、ほとんどの要素を均一なサイズとゼロマージン、パディングなどにリセットします。例については、http://meyerweb.com/eric/tools/css/reset/またはGoogleを参照してください。
最もリセットスタイルシートは(ほとんどの開発者はそれらを継承し、代わりに明示的にサイズ/色を設定したいしたくない)input
とselect
継承の色をしないので、あなたのスタイルシートでそれらを設定する必要があります。
input, select { ... }
は(他の回答により示唆されるように)ため* { ... }
任意の目的と注意してください。このは、CSSの「カスケード」部分であるを破り、ネストされた要素で期待されるようにカスケードしないルールを引き起こします。あなたが* { color:red; }
を使用して、次のHTMLがある場合:
<h1 style="color:green;">Hello <i>world</i></h1>
をあなたは緑こんにちはと赤世界になってしまいます。 (<i>
は*
と一致しているため、新しい要素ではスタイルが赤にリセットされ、カラーはもはやカスケードされません)。
+1は「{*}に注意してください。あなたはそれについて絶対に正しいです。 ;) – NotMe
@Chrisは難しい方法を学んだ;) – Nicole