cssの子孫セレクタの適用のさせ方がわからない

前提・実現したいこと

子孫セレクタのcssの適用をしたい。
div要素のarticle内にあるp要素にcssを適用したい

発生している問題・エラーメッセージ

cssの記述ミスかわからないがなぜか、適用されない

該当のソースコード

@CHARSET "UTF-8";
h1{
    margin-top:20px;
    margin-bottom:40px;
}

p{
    color:red;
    font-size:24px;

}

p.important{
    color:green;
    font-size:20px;
    margin-top:40px;
    padding-top:20px;
}

p#justimp{
    color:blue;
    font-size:30px;
}

div article p {
    font-size:40px;
    color blue;
}

###htmlのコード

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSSの基本</title>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
    <h1>h1要素</h1>
    <p>p要素</p>
    <p>普通の要素</p>

    <!--各々のセレクタを選択したい場合classわけなどをしておくとよい  -->
    <p class="important">important elm</p>
    <p id="justimp">justimp</p>

    <!-- 子孫セレクタ -->
    <!-- 文書の構造に沿って指定するセレクタ -->

    <div>
        <article>
            <p> div>article>pの文章の順</p>
        </article>

    </div>
</body>
</html>

試したこと

とある記事にて子孫セレクタの記述法があったためdiv>article>p{
のように記述して内容を書き換えてみた。が、だめであった

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答2件

CSS
1div article p {
2    font-size:40px;
3    color blue;
4}

とありますが、colorの横の「:」が抜け落ちています。
記述ミスがあったのできちんと反映されていなかったのだと思います。

普段何のブラウザを使用されているかわかりませんが、chromeではF12を押すとデバッグモードになりエラーやちゃんとCSSが適用されているか一目で分かります。
仮に間違った記述をしていると注意マークで下記の図のように教えてくれるので参考にしてください。

投稿2020/11/09 08:25

編集2020/11/09 08:35

itzuakniami123

総合スコア74

ベストアンサー

CSS
1  /*color blue;*/
2    color: blue;

投稿2020/11/09 08:20

kei344

総合スコア69458

wassan_nikoniko

2020/11/09 12:48

丁寧にご回答いただきありがとうございます！！ Chromeじょうにてデベロッパーツールを使用すれば良いのですね！ありがとうございます！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！