セレクタの種類
セレクタ：
この場所に対して何かしてねという部分
.wrapとか
全称セレクタ：
*{}
アスタリスクを使う。HTML上に存在するすべての要素に対して何かしてね。
あまり実務で使うことはないらしい。全部の余白を全部いったん0にしてそのあと自分で好みで余白を設定したいみたいなときに使う。ただし読み込みの時にちょっと時間がかかるようになったりする。
要素セレクタ：
タグ名{}
h2{}など
classセレクタ：
.クラス名{}
この特定のdivとpの色を赤くしてねのように、要素の違いを超えて一括指定したいときなどに用いる。
HTMLでclass属性をつけた要素に対して効く。
idセレクタ：
#id名{}
ハッシュid名で記述する。
HTMLでid属性をつけた要素に対してスタイルを適用するときに使う。
属性セレクタ：
_blankをもってるものにかけようとか。
例：
<img src="a.png" alt="猫の写真">
imgタグに対してかけるとき：
img{
}
alt属性が「猫の写真」になってるものにかける：
img[alt='猫の写真']
疑似要素：
セレクタ::疑似要素{}
セレクタコロンコロン疑似要素とつづる。コロンは１つでも構わないが2つ書くのが他と区別するために慣習になっている。
div::after{}
divという要素の一番最後に疑似的にafterという要素を作ってくださいねという意味？
>要素名:after
スタイルを適用するのは対象要素の直後（要素の直後に内容を挿入する時に使う）
blockquote:after {content:"』";}
疑似クラス：
セレクタ：疑似クラス{}
a:hover{}
疑似的にそこにクラスを付与する。
aタグに対してカーソルを重ねたとき色を変えてくださいとか。
子孫セレクタ：
セレクタ セレクタ{}
セレクタ（半角スペース）セレクタと綴る
body main h2{}とか
.wrap p{}とか
すごく使うセレクタ。
body h2{}と綴ると、body内にあるh2にすべてかかる。間にdivが挟まっていようと適用される。(body div h2{}にもかかる)
つまり子にも孫にもかかる
↑
↓
子セレクタ：
子供になるセレクタだけにかかる
ul>li{}
この場合孫にはかからない。
ul>li>a{}と綴ることもできる
複数セレクタ：
セレクタ,セレクタ{}
セレクタ、カンマ、セレクタと綴る
2つ以上のセレクタを指定することもできる
header,main,footer{
width:80%;
}
headerとmainとfooterの横幅を80％にまとめてする。便利。
隣接セレクタ：
セレクタ＋セレクタ{}
セレクタ、プラス記号、セレクタと綴る
同じ親を持つ要素（兄弟）に対して使うときのセレクタ。
p+div{}と綴ると、pと隣接している兄弟のdivだけにかけるになる。↓
<div>
<p></p>
<div></div>//この部分だけにかかる
</div>
外側のdivにはかからない。
cssは上から実行され、下に書いたものが優先される。
h1{
color:#f00;
background-color:#0f0;
}
h1{
color:#00f;
}
こう記述したらh1の文字色は青になる。
