ｃｓｓが反映されない

Question

cssが反映されない

html

 <div class="boxA">  
   <article class="gaiyou">
       <a href="#">
           <img src="img/tomato.jpg" alt="">
           <h1>もぎだてトマトをおいしく食べたい</h1>
           <p>もぎだてトマトを食べたくなって、ちょっと郊外にあるトマト農家の直売所まで行ってきました。ここの・・・</p>
           <p class="more">続きを読む</p>
       </a>
   </article>
   </div>

以下反映されないcssの記述です。

.gaiyou a:hover {box-shadow:0 0 10px #dddddd}
.gaiyou img {
max-height: 100%;
height: auto;
border: none;
margin-bottom:15px;
vertical-align:bottom
}

.gaiyou h1 {
margin-top: 0;
margin-bottom: 5px;
margin-left: 15px;
margin-right: 15px;
font-size: 22px
}

.gaiyou p {
margin-top: 0;
margin-bottom: 15px;
margin-left:15px;
margin-right:15px;
font-size:14px
}

/続きを読む/
.more {
display: inline-block;
padding: 5px 15px;
background-color: #3077be;
color: #ffffff
}

実際のページ

　試したこと

ファイルは同じ階層にあります。
cssのファイル名などもあってます。
デベロッパーツールにエラーはなかったです。
何か考えられる原因はありませんか？

Comments

[5ugarVVatch1ng]

ここに対象のCSSファイルが存在しますか？（Chromeじゃなかったらすみません。）
https://qiita.com/sasao3/items/8ae62bc64fed7913d1b1#sources-panel

[5ugarVVatch1ng]

また、キャッシュの問題かもしれないのでスーパーリロードしてみてください。

[consel]

CSS全体が効いていないように見えますが、htmlからcssファイルを読み込んでいる箇所も見せていただけますか？

例
```
<link rel="stylesheet" type="text/css" href="src/css/tomato.css">
```

Answer 1

こちらで動かしてみましたが、効かないのは下の箇所ですね。
.gaiyou a:hover {box-shadow:0 0 10px #dddddd}

aタグはインライン要素なので、box-shadowは無効です。有効にする場合は『display: block;』を加えればいいです。下の●印の感じです。
.gaiyou a:hover {display: block;●box-shadow:0 0 10px #dddddd}

Comments

[banana.red]

ありがとうございます。こういうケースもあるのですね。
他も治りました。

Answer 2

/続きを読む/

これが邪魔してるんじゃない？

Comments

[banana.red]

質問だとうまく表示できてなかったですがコメントアウトです。すみません。
/**/
試しに消してみましたが変わらなかったです。

Answer 3

追記:2022-04-16

antsさんが回答されている通り
aのdisplayがinlineのままなのが原因ぽいですね:

下記を追加してaタグをinline-blockかblockにしてみるとどうなりますか？

.gaiyou a{
  display:inline-block;
}
/* もしくは */
.gaiyou a{
  display:block;
}

その際 transition:box-shadow .3s; みたいな記述を追加すると、
フワっと影が表示されます。

.gaiyou a{
  display:inline-block;
  transition:box-shadow .3s;
}

---

"
そのダブルクォートちゃんと半角のダブルクォートですか？

ソースコードはめんどくさがって画像にせず、コードで質問文内に記述してください。

対象のhtml本文もあった方がいいと思います。

以下反映されないcssの記述です

反映されるcssもあるんでしょうか？

cssだけが効かないようですが、jsは機能していますか？

Comments

[banana.red]

わかりました。
修正します。

[banana.red]

修正しました。
visual studioのエラーがなかったので半角だと思います。

[banana.red]

反映されるcssもあるんでしょうか？
→これ以前に書いていたものは反映されていました。

cssだけが効かないようですが、jsは機能していますか？
→htmlは機能しています。