<p>を入れると、font-weight:bold;が効きません。

Question

font-weight:  bold;

で文字を太字にしているのですが、Pタグで文字を囲むと、上のタグが効かなくなってしまいます。
検索しても、「Pタグで囲むと太字にならなくなる」とは出てきません。
Pタグで囲んでいないときはちゃんと太字になってくれるのですが、なぜなのでしょうか。

Comments

[m.ts10806]

CSS(しかも一部)だけでは誰も再現できません。
現象再現する関連コードは原則全てご提示ください

Answer 1

とくに問題ないです

<style> .hoge{font-weight: bold;} </style>

<span class="hoge">test</span>

<p><span class="hoge">test</span></p> <p class="hoge">test</p>

Comments

[kyoya0819]

classってその書き方できるんですか？

[AmiI]

どうして問題ないと言っているのに、急に「span」が出てきているんでしょうか。

[kyoya0819]

キャッシュの問題だと思いますスーパーリロードを行ってください。

[AmiI]

すみません、いくらリロードしてもpで囲むと細字になってしまうのですが…。

[kyoya0819]

普通のリロードではなくスーパーリロードです

[kyoya0819]

「スーパーリロードでもダメなら」CSSの1番下に以下の記述をしてみてください。

p {
font-weight: bold !important
}

[yambejp]

> どうして問題ないと言っているのに、急に「span」が出てきているんでしょうか。

どのパターンでやっても太字になるというサンプルです。
そもそも質問者さんのいう「pで囲む」の意味が
あいまいすぎるのがいけません
細字になるというhtmlとスタイルシートのサンプルを提示ください

[kyoya0819]

再掲載「classってその書き方できるんですか？」

[yambejp]

asuchi0819さん
失礼しました。typoは直しました

[AmiI]

asuchi0819さん
ありがとうございます！
スーパーリロードでもダメでしたが、コードの打ち込みで直りました！

Answer 2

CSSの基本形は

セレクタ　{
  プロパティ: 値
}

で、セレクタで、どのタグに適用するかを指定します。

質問のCSSは

font-weight:  bold;

だけで、セレクタが指定されていないので、何のタグにも囲まれていない範囲に"太字にする"が適用されます。

Pタグで囲むと、「何のタグにも囲まれていない範囲」でなくなるので、"太字にする"が適用されなくなります。

タグで囲まれているかどうか、どんなタグが使われているかどうかに関わらず適用するには、

* {
    font-weight:  bold;
}

とします（*は、何にでも一致するワイルドカードなので）

また、Pタグに囲まれた範囲に適用するなら

p {
    font-weight:  bold;
}

とします。