CSSでセレクタ指定しても反映されない

回答率: 85.48%

質問するログイン新規登録

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

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

新規登録して質問してみよう

ただいま回答率: 85.48%

トップ HTMLに関する質問

Q&A

解決済

2回答

571閲覧

CSSでセレクタ指定しても反映されない

総合スコア12

0グッド

1クリップ

投稿2018/10/02 16:16

0

1

前提・実現したいこと

copy-containerクラスの中のh1要素にCSSが効きません。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="jp" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <link rel="stylesheet" type="text/css" href="stylesheet.css">
6    <title>写経</title>
7  </head>
8
9  <body>
10
11  <div class = "header">
12    <div class = "header-logo">Progate写経</div>
13      <div class = "header-list">
14       <ul>
15         <li>test3</li>
16         <li>test2</li>
17         <li>test1</li>
18       </ul>
19     </div>
20  </div>
21
22
23  <div class ="main">
24    <div class="copy-container">
25      <h1>Welcome</h1>
26      <h2>ようこそ</h2>
27    </div>
28    <div class="contents">
29      <h1>test</h1>
30    </div>
31
32    <div class="contact-form">
33
34    </div>
35
36  </div>
37
38  <div class = "footer" >
39    <div class = "footer-logo">Progate写経</div>
40    <div class = "footer-list">
41      <ul>
42        <li>test1</li>
43        <li>test2</li>
44        <li>test3</li>
45      </ul>
46
47
48    </div>
49  </div>
50
51  </body>
52</html>
53

CSS
1body {
2font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic'
3}
4
5* {
6  padding: 0px;
7  margin: 0px;
8}
9
10.header {
11  background-color: #8e98f5;
12  height: 120px;
13}
14
15.main {
16  background-color: #b1cbfa;
17  height: 400px;
18  padding: 100px 150px;
19}
20
21.footer {
22  background-color: #dfe2fe;
23  height: 120px;
24}
25
26
27/*ヘッダー関係*/
28.header-logo{
29  font-size: 22px;
30  float: left;
31  padding: 33px 20px;
32}
33
34.header-list li {
35  list-style: none;
36  float: left;
37  padding-top: 39px;
38  padding-bottom: 39px;
39  padding-left: 40px;
40  padding-right: 10px;
41}
42
43/*メイン関係*/
44
45.copy-container h1 {
46  display: none;
47}
48.contents h1 {
49  display: none;
50}
51
52/*フッター関係*/
53
54.footer-logo {
55  float: left;
56  padding: 20px;
57}
58
59.footer-list ul {
60  list-style: none;
61  float: right;
62  padding-right: 20px;
63}
64
65.footer-list li {
66    margin-bottom: 10px;
67}

試したこと

すぐ後のcontentsクラスの中のh1要素に対しても試してみたのですが、こちらには反映されました。

2018/10/03 01:00

ところどころに変な文字が入っていますが、見えてませんかね？環境は何でしょうか？

2018/10/03 01:07

すいません、確認できないですね,,, chrome:バージョン: 69.0.3497.100 Atom:1.30.0 mac: High Sierra 10.13.3です。

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

回答2件

0

ベストアンサー

面白いですねこれ。

.copy-container h1と.contents h1の順番を入れ替えると、上に書いた方が無効化されるのが分かります。

/*メイン関係*/の二行上の行末に制御文字^Hが入っているのが原因のようです。
}^Hを}に修正すると直ります。

これ以上詳しくは分かんないです。

投稿2018/10/02 17:41

総合スコア2413

2018/10/03 00:45

解決しました！ありがとうございます。

2018/10/03 01:13 編集

制御文字を見つけた方法を教えて頂けますでしょうか。ショートカットを使う際、commandキーと間違えてoptionキーを押して、変な記号を入力してしまう事があるのですがこれが原因ですかね・・？

2018/10/03 01:26

おめでとうございます！ vimだと制御文字が表示されるので、それで見つけました。

2018/10/03 01:31

vimで確認できるんですね！非常に助かりました。ありがとうございます！

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

0

https://teratail.com/questions/124949
これですね。いまだに直っていないようです。注意して回避するしかないみたいです。
なお、Windowsからはあからさまにおかしく見えます。
https://studio.beatnix.co.jp/kids-it/kids-programming/scratch/invisible-character/

投稿2018/10/03 01:18

総合スコア13749

2018/10/03 01:31

バグに近い感じなんですね！助かりました。ありがとうございます！

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

関連した質問

トップ HTMLに関する質問

CSSでセレクタ指定しても反映されない

関連した質問

同じタグがついた質問を見る

運営からのお知らせ

【重要なお知らせ】いつもteratailをご利用いただきありがとうございます。現在、認証システムの修正により、一部のユーザーが強制的にログアウトされる可能性がございます。お手数おかけしますが、再度ログインを行なっていただきますよう宜しくお願いいたします。ご不便をおかけし申し訳ございません。

過去のお知らせを見る