親要素で指示したものが、全ての子要素ではなく一部の子要素に効いてしまう

親要素で指示したものが、全ての子要素ではなく一部の子要素に効いてしまうのですが、何故でしょうか。
クラスexample　imgで指定したサイズを全ての子要素に反映させたい（クラスtokyo img)が、反映されないのは何故でしょうか。

html
1<!DOCTYPE html>
2<head>
3    <meta charset="utf-8">
4    <title>建設</title>
5    <link rel="stylesheet" href="stylesheet.css" >
6</head>
7<body>
8    <header>
9        <img src="https://danblog.tokyo/img/header_logo.png">
10        <ul>
11            <li>企業理念</li>
12            <li>施工事例</li>
13            <li>採用情報</li>
14            <li>お問い合わせ</li>
15        </ul>
16        <h1>街を作る。未来を作る。</h1>
17    </header>
18    <div class="info">
19        <h2>お知らせ</h2>
20        <div class="info-p">
21            <p>------------------------------------------------</p>
22            <p>------------------------------------------------</p>
23            <p>------------------------------------------------</p>
24        </div>
25        
26    </div>
27    <div class=example>
28        <h2>施工事例</h2>
29        <div　class="saitama">
30            <img src="https://danblog.tokyo/img/building1.png">
31            <h3>M様邸新築工事</h3>
32            <p>埼玉県</p>
33            <img src="https://danblog.tokyo/img/more.png">
34        </div>
35        <div　class="tokyo">
36            <img src="https://danblog.tokyo/img/building2.png">
37            <h3>スカイビル</h3>
38            <p>東京都</p>
39            <img src="https://danblog.tokyo/img/more.png">
40        </div>
41    </div>
42</body>

css
1*{
2    padding:0;
3    margin:0;
4}
5
6header{
7    background-image: url(https://danblog.tokyo/img/building2.png);
8    height:550px;
9    background-size: cover;
10}
11
12header img{
13    margin-left:180px;
14    margin-top:30px;
15
16    width: 130px;
17}
18
19header ul{
20    float:right;
21    display:flex;
22    margin-top: 50px;
23    margin-right: 90px;;
24}
25
26header li{
27    list-style: none;
28    margin-right: 80px;
29}
30
31header h1{
32    text-align: center;
33    padding-top:200px;
34    font-size:50px;
35    font-family:serif;
36}
37
38header img:hover{
39    cursor: pointer;
40    opacity:0.5;
41}
42
43header li:hover{
44    cursor: pointer;
45    opacity:0.5;
46}
47
48.info{
49    height:350px;
50}
51
52.info h2{
53    font-size: 50px;
54    text-align: center;
55    margin-top: 50px;
56    font-family:serif;
57}
58
59.info-p{
60    margin-top: 40px;
61    text-align: center;
62    width:30%;
63    margin-right:auto;
64    margin-left:auto;
65}
66
67.info-p p{
68    height:50px;
69    border-bottom: black 1px solid;
70    padding-top: 20px;
71}
72
73.example h2{
74    text-align: center;
75}
76
77.saitama{
78    border: black 1px solid;
79}
80
81.tokyo{
82    border: black 1px solid;
83}
84
85.example img{
86    width:30%;
87    height:30%;
88}

K_3578

2021/04/06 02:15

<code>ブロックがぐちゃぐちゃになっているので修正お願いします。 ```HTML (元々書いてある「コード」は消して下さい) <head> <meta charset="utf-8"> (以下省略) ``` (<code>ブロック間は1行以上空けましょう) ```CSS *{ padding:0; margin:0; } (以下省略) ```

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

回答2件

ベストアンサー

下記の2箇所のdiv と class の間の全角空白を半角空白に修正すればいいでしょう。

html
1<div　class="saitama">  
2
3<div　class="tokyo">

投稿2021/04/06 02:26

hatena19

総合スコア34084

fukaw

2021/04/06 02:28

ありがとうございます！

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

<div　class="tokyo">など、一部で全角スペースが使われている箇所があります。

結果、タグとして正しく認識されなくなり、</div>が意図しない<div>と結びついてしまっているのではないでしょうか。

投稿2021/04/06 02:25

maisumakun

総合スコア146063

fukaw

2021/04/06 02:27

ありがとうございます！

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.35%

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

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

質問する

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

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

親要素で指示したものが、全ての子要素ではなく一部の子要素に効いてしまう

関連した質問