スタイル(CSS)の適用される優先順位を知る

何回調べても忘れてハマる自分がすごいと思います。

- 環境
    - OS : macOS Sierra version10.12.5 64bit
    - Chrome : Version 59.0.3071.115 (Official Build) (64-bit)

### 何も指定しなければユーザーエージェントの指定が適用される
![Screen Shot 2017-07-05 at 21.03.26.png](https://qiita-image-store.s3.amazonaws.com/0/159761/60749195-40f4-0602-a7ed-8b9b4d5743e5.png)

```html:sample.html
<html>
<head>
    <title>sample</title>
</head>
<body>
    <input type="text" value="文字色は何色？">
</body>
</html>
```
### 製作者の指定が優先
![Screen Shot 2017-07-05 at 21.07.48.png](https://qiita-image-store.s3.amazonaws.com/0/159761/2b40ec96-dfd6-89bc-408a-e77d7c0cb8a6.png)

```html:sample.html
<html>
<head>
    <title>sample</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
    <input type="text" value="文字色は何色？">
</body>
</html>
```

```css:style.css
@charset "UTF-8";
/* SASSから出力しています */
input[type="text"] {
  color: blue;
}

/*# sourceMappingURL=style.css.map */
```

### あとから読み込まれた指定が優先
![Screen Shot 2017-07-05 at 20.35.06.png](https://qiita-image-store.s3.amazonaws.com/0/159761/7f8f0fc8-c45b-4ea0-cf9a-a3e5f57db02f.png)

```html:sample.html
<html>
<head>
    <title>sample</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
    <input type="text" value="文字色は何色？">
</body>
</html>
```

:loudspeaker:CSSはファイルの上から下の順で読み込まれます。

```css:style.css
@charset "UTF-8";
/* SASSから出力しています */
input[type="text"] {
  color: blue;
}

input[type="text"] {
  color: purple;
}

/*# sourceMappingURL=style.css.map */
```

### タグに近い指定が優先
![Screen Shot 2017-07-05 at 20.38.37.png](https://qiita-image-store.s3.amazonaws.com/0/159761/fd5ecedd-59ff-ee2e-7f62-beb0a96c196d.png)

```html:sample.html
<html>
<head>
    <title>sample</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <style type="text/css">
        input[type="text"] {
            color: red;
        }
    </style>
</head>
<body>
    <input type="text" value="文字色は何色？" style="color: green;">
</body>
</html>
```

※. style.cssは上と同じ

### 具体的な指定が優先
![Screen Shot 2017-07-05 at 20.51.36.png](https://qiita-image-store.s3.amazonaws.com/0/159761/d392b13e-3be6-9079-184f-f9f9f63f0d40.png)

```html:sample.html
<html>
<head>
    <title>sample</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <style type="text/css">
        input[type="text"] {
            color: red;
        }
    </style>
</head>
<body>
    <input type="text" value="文字色は何色？" id="moji" class="iro">
</body>
</html>
```

```css:style.css
@charset "UTF-8";
/* SASSから出力しています */
#moji {
  color: orange;
}

input[type="text"].iro {
  color: pink;
}

.iro {
  color: green;
}

input[type="text"] {
  color: blue;
}

input[type="text"] {
  color: purple;
}

/*# sourceMappingURL=style.css.map */
```

### けど、selectタグの選択状態での指定をするとよくわからない状態になる
![Screen Shot 2017-07-06 at 0.20.33.png](https://qiita-image-store.s3.amazonaws.com/0/159761/3a662d21-b9bd-500c-1af4-442baf4aa52b.png)

どなたか、選択状態での「color」と「background-color」の指定方法を教えて下さい・・・・。

```html:sample.html
<html>
<head>
    <title>sample</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <style type="text/css">
        input[type="text"] {
            color: red;
        }
    </style>
</head>
<body>
    <p>セレクトボックスの場合
        <select multiple size="2">
            <option value="on">選択している</option>
            <option value="off">選択していない</option>
        </select>
    </p>
</body>
</html>
```

```css:style.css
@charset "UTF-8";
/* SASSから出力しています */
#moji {
  color: orange;
}

input[type="text"].iro {
  color: pink;
}

.iro {
  color: green;
}

input[type="text"] {
  color: blue;
}

input[type="text"] {
  color: purple;
}

select option:checked {
  color: pink;
  background-color: red;
  font-weight: bold;
}

/*# sourceMappingURL=style.css.map */
```