40

「ボタン」という名前の CSS クラスを作成し、次のようにしてすべての INPUT タグに適用しました。

.button input
{
//css stuff here
}

<p class="button">
<input type="submit" Name='submit' value="Confirm Selection"/>
</p>

これは正常に動作しますが、別のボタンを追加しましたが、これはフォームの一部ではなく、javascript でトリガーされ、iFrame を開く単なるプレースホルダーです。すべての「実際の」ボタンと同じように見せたかったので、同じクラスを使用しました。

<p class="button" id="AddCustomer">
<a href="AddCustomer.php">Add Customer</a>
</p>

.button input私が抱えていた問題は、タグとしてクラスを離れた場合、それが<a>表示されなかったことです。inputCSSの一部を削除すると、すべてのボタンの中央に灰色の四角形ができました。

だから私はそれを解決しました.button input,a

これはうまくいきました。. . 別のページを見て、<a>このクラスが適用されていなくても、すべてのタグが「ボタン」クラスでフォーマットされていることがわかりました。

<input>私の質問は、同じ CSS クラスをと<a>タグに同時に適用するにはどうすればよいかということですが、明示的に を追加した場合に限りclass="button"ます。

4

4 に答える 4

74

aセレクターの一部も修飾する必要があります。

.button input, .button a {
    //css stuff here
}

基本的に、コンマを使用してセレクターのグループを作成すると、個々のセレクターは完全に独立しています。それらの間に関係はありません。

したがって、元のセレクターは、「クラス名が「button」の要素の子孫であるタイプ「input」のすべての要素と、タイプ「a」のすべての要素」に一致しました。

于 2012-09-28T13:14:43.027 に答える
9

使用してみてください：

.button input, .button a {
    // css stuff
}

また、CSSについてもお読みください。

編集：私なら、ボタンクラスを親タグではなく要素に追加します。そのようです：

HTML:

<a href="#" class='button'>BUTTON TEXT</a>
<input type="submit" class='button' value='buttontext' />

CSS:

.button {
    // css stuff
}

特定の CSS の使用については、次のようにします。

input.button {
    // css stuff
}
a.button {
    // css stuff
}
于 2012-09-28T13:15:10.650 に答える
3 
.button input,
.button a {
    ...
}
于 2012-09-28T13:14:49.323 に答える
1

これを試して：

.button input, .button a {
//css here
}

これにより、内部にネストされたすべてのタグにスタイルが適用されます<p class="button"></p>

于 2012-09-28T13:19:11.837 に答える