質問編集履歴

1

mpamppamtpad

mpamppamtpad score 0

2019/09/16 15:44  投稿

focusで一部の背景色を変えたいが、ページ全体の色が変わってしまう
### 前提・実現したいこと
初心者です。勉強始めたばかりです。
https://www.youtube.com/watch?v=-tg8BlCv7Uk
この動画でCSSの疑似要素を勉強していました。
focusで選択した部分の色だけを変えたいです。
### 発生している問題
```
focusで選択したところの色を変えようとしたのですが、ページ全体の色が変わってしまいました。
```
### 該当のソースコード
```html
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>属性セレクタの練習</title>
    <link rel="stylesheet" href="2-6 style.css">
 </head>
<body>
    <div class="main">
       <h1>Heading 1</h1>
       <a href="#a">mainクラスの子要素のリンク</a>
       <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
       </p>
       <input type="text">
       <h2>Heading 2</h2>
       <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<a href="#b">mainクラスの子要素ではないリンク</a> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
       </p>
       <a href="#a">mainクラスの子要素のリンク</a>
       <h2>Heading 2</h2>
       <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <a href="#c">mainクラスの子要素ではないリンク</a> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
       </p>
       <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
       </p>
   </div>
   </body>
</html>
```
```CSS
body{
   font:1.1em/1.5sans-serif;
   padding-top:20px;
}
.main{
   border:1px solid;
   margin:auto;
   padding:10px 20px 20px;
   width:760px;
}
/* 疑似要素を使うと */
a:link{
   color:crimson;}
a:visited{
   color:green;
}
a:hover{
   text-decoration:none;
   background-color: lightgray;
}
:focus{
   background-color: yellow;
}
```
### 試したこと
ファイルをグーグルクロームで開くとうまくいきました。しかし、インターネットエクスプローラーだとページ全体の色が変わってしまいました。
ここに問題に対して試したことを記載してください。  
### 補足情報(FW/ツールのバージョンなど)
windows7でやってます。
ここにより詳細な情報を記載してください。
  • HTML

    14208 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    9501 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • ファイル

    360 questions

    ファイルとは、文字列に基づいた名前又はパスからアクセスすることができる、任意の情報のブロック又は情報を格納するためのリソースです。

  • Windows 7

    449 questions

    Microsoft Windows 7は過去にリリースされたMicrosoft WindowsのOSであり、Windows8の1代前です。2009年の7月にリリースされ販売されました。Windows7の前はWindowsVistaで、その更に3年前にリリースされました。

  • YouTube

    140 questions

    YouTubeとはユーザーがビデオをアップロード・共有・閲覧できるビデオ共有ウェブサイトです。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る