CSSが反映されません。

前提・実現したいこと

ドットインストールでクイズを作っているのですがcssが反映されません。

ここに質問の内容を詳しく書いてください。
jQueryのaddClassでクラスをつけた箇所のcssなのですが、検証ツール等で見てもクラスは付いているのですがcssが反映されません。

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

エラーメッセージ

該当のソースコード

ソースコード
$(function() {
  'use strict';

  $('.answer').on('click', function() {
    var $selected = $(this);
    if($selected.hasClass('correct') || $selected.hasClass('wrong')){
      return;
    }
    $selected.addClass('selected');
    var answer = $selected.text();

    $.post('/_answer.php', {

    }).done(function(res) {
      $('.answer').each(function() {
        if ($(this).text() === res.correct_answer) {
          $(this).addClass('correct');
        } else {
          $(this).addClass('wrong');
        }
      });
      // alert(res.correct_answer);
      if (answer === res.correct_answer) {
        // correct!
        $selected.text(answer + ' ... CORRECT!');
      } else {
        // wrong!
        $selected.text(answer + ' ... WRONG!');
      }
    });
  });

});

styles.css
1styles.css
2body {
3  font-size: 16px;
4  font-family: Arial, sans-serif;
5}
6#container {
7  width: 500px;
8  margin: 15px auto;
9}
10h1, ul > li {
11  border: 1px solid #ddd;
12  border-radius: 5px;
13}
14h1 {
15  padding: 10px;
16  height: 50px;
17  font-size: 18px;
18  margin: 0 0 10px;
19}
20ul {
21  list-style: none;
22  margin: 0 0 10px;
23  padding: 0;
24}
25ul > li {
26  margin-bottom: 7px;
27  padding: 7px 10px;
28  cursor: pointer;
29}
30#btn {
31  text-align: center;
32  float: right;
33  width: 100px;
34  padding: 7px;
35  color: #fff;
36  border-radius: 5px;
37  background: #00aaff;
38  box-shadow: 0 4px 0 #0088cc;
39  cursor: pointer;
40  font-size: 14px;
41}
42#btn.disabled {
43  opacity: 0.5;
44}
45
46.correct {
47  color: limegreen;
48  font-weight: bold;
49}
50.wrong {
51  color: #ddd;
52}
53.selected {
54  font-weight: bold;
55}

index.php
1
2<?php
3
4require_once(__DIR__ . '/config.php');
5require_once(__DIR__ . '/Quiz.php');
6
7$quiz = new MyApp\Quiz();
8$data = $quiz->getCurrentQuiz();
9shuffle($data['a']);
10
11?>
12<!DOCTYPE html>
13<html lang="ja">
14<head>
15  <meta charset="utf-8">
16  <title>Quiz</title>
17  <link rel="stylesheet" href="styles.css">
18</head>
19<body>
20  <div id="container">
21    <h1>Q. <?= h($data['q']); ?></h1>
22    <ul>
23      <?php foreach ($data['a'] as $a) : ?>
24        <li class="answer"><?= h($a); ?></li>
25      <?php endforeach; ?>
26    </ul>
27    <div id="btn" class="disabled">Next Question</div>
28  </div>
29  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
30  <script src="quiz.js"></script>
31</body>
32</html>
33

<!--view-source:-->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Quiz</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="container">
    <h1>Q. What is A?</h1>
    <ul>
              <li class="answer">A0</li>
              <li class="answer">A3</li>
              <li class="answer">A1</li>
              <li class="answer">A2</li>
          </ul>
    <div id="btn" class="disabled">Next Question</div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="quiz.js"></script>
</body>
</html>

試したこと

ここに問題に対して試したことを記載してください。
キャッシュの削除等は行いましたがダメでした。

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

ここにより詳細な情報を記載してください。
cssの.correct以下が反映されません。
検証ツールでは打ち消し線で消えているのではなく、表示すらされません。

thyda.eiqau

2020/02/07 17:41

検証ツールで見たときに、「クラスはついているが、そのクラスに指定しているはずのスタイルが一覧に表示されない」のか、「クラスに指定しているスタイルは一覧表示されているが、打ち消し線がついていて反映されていない」のか、どちらでしょうか。

m.ts10806

2020/02/07 20:30

今回「PHP」はどのように関係するのでしょうか。また、HTMLも提示されないことには再現確認ができません。あと、コードはファイル毎に別ブロックとし、実際のコード以外はブロック内に含めないようにしてください。マークダウンのcode機能はブロック内情報のコピー機能もあるので、コード以外が入るとノイズになります。

masaosama

2020/02/08 03:53

ご指摘ありがとうございます。追記、編集しました、宜しくお願いします。

thyda.eiqau

2020/02/08 04:22

> html追記しました。また、検証ツールではこのCSSは表示されません。(線で消えていたりはしないです、) 編集の要約欄にかかれていますが、そこに書いても、この質問ページを開いただけの人には読めないので、質問本文に書いてくださいね。

Lhankor_Mhy

2020/02/08 05:36

・「cssが反映されません」とは、具体的にはどのような表示になるのでしょうか？反映されていない、と思う根拠は何ですか？・反映されていない、と感じたスタイルは以下のうち、どれですか？ color: limegreen; font-weight: bold; color: #ddd;

masaosama

2020/02/08 07:01

検証ツールで見てみるとCSSが表示されません。（打ち消し線等もない）上記のいずれも反映されません。

m.ts10806

2020/02/08 07:07

コンソールにエラー出てないんですよね？styles.cssのNot Foundとか。

masaosama

2020/02/08 07:10

出てません。

Lhankor_Mhy

2020/02/08 07:49

とすると、ありえそうなのは、CSSに全角スペースなどの無効な文字が含まれてて、それ以降のCSSが無効になっている、という線でしょうか。 CSSの最初に、 *{opacity: 0.1;} 最後に、 *{opacity: 1;} と入れると、どうなりますか？

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

回答1件

PHPのコードがないのでなんともいえませんが、下記の代替コードで問題なく動作しているように見えました。
確認した環境では _answer.php がないので、AjaxはかならずErrorになるので .fail() でキャッチするように変えています。
Codepen

インスペクタで見てクラスがついているのが確認できるということなので、CSS側に問題がある可能性が高い気がしますが、ご提示されているCSSはこれで全てでしょうか？
もしファイルの一部を抜粋しているだけなら、省略された部分に原因がある可能性があるので見直してください。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>Quiz</title>
6  <!-- <link rel="stylesheet" href="styles.css"> -->
7</head>
8<body>
9  <div id="container">
10    <h1>Q. Which one?</h1>
11    <ul>
12      <li class="answer">Mercury</li>
13      <li class="answer">Venus</li>
14      <li class="answer">Earth</li>
15      <li class="answer">Mars</li>
16      <li class="answer">Jupiter</li>
17      <li class="answer">Saturn</li>
18      <li class="answer">Uranus</li>
19      <li class="answer">Neptune</li>
20    </ul>
21    <div id="btn" class="disabled">Next Question</div>
22  </div>
23<!--
24  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
25  <script src="quiz.js"></script>
26-->
27</body>
28</html>

css
1/* styles.css */
2body {
3  font-size: 16px;
4  font-family: Arial, sans-serif;
5}
6#container {
7  width: 500px;
8  margin: 15px auto;
9}
10h1, ul > li {
11  border: 1px solid #ddd;
12  border-radius: 5px;
13}
14h1 {
15  padding: 10px;
16  height: 50px;
17  font-size: 18px;
18  margin: 0 0 10px;
19}
20ul {
21  list-style: none;
22  margin: 0 0 10px;
23  padding: 0;
24}
25ul > li {
26  margin-bottom: 7px;
27  padding: 7px 10px;
28  cursor: pointer;
29}
30#btn {
31  text-align: center;
32  float: right;
33  width: 100px;
34  padding: 7px;
35  color: #fff;
36  border-radius: 5px;
37  background: #00aaff;
38  box-shadow: 0 4px 0 #0088cc;
39  cursor: pointer;
40  font-size: 14px;
41}
42#btn.disabled {
43  opacity: 0.5;
44}
45
46.correct {
47  color: limegreen;
48  font-weight: bold;
49}
50.wrong {
51  color: #ddd;
52}
53.selected {
54  font-weight: bold;
55}

js
1// ソースコード
2$(function() {
3  'use strict';
4
5  $('.answer').on('click', function() {
6    var $selected = $(this);
7    if($selected.hasClass('correct') || $selected.hasClass('wrong')){
8      return;
9    }
10    $selected.addClass('selected');
11    var answer = $selected.text();
12
13    $.post('/_answer.php', {
14
15    }).done(r => {}).fail(r => { // DEBUG: PLEASE MODIFY THIS LINE
16      let res = {correct_answer: 'Earth'}; // DEBUG: PLEASE REMOVE THIS LINE
17      $('.answer').each(function() {
18        if ($(this).text() === res.correct_answer) {
19          $(this).addClass('correct');
20        } else {
21          $(this).addClass('wrong');
22        }
23      });
24      // alert(res.correct_answer);
25      if (answer === res.correct_answer) {
26        // correct!
27        $selected.text(answer + ' ... CORRECT!');
28      } else {
29        // wrong!
30        $selected.text(answer + ' ... WRONG!');
31      }
32    });
33  });
34});