CSS选择器

一、简单选择器

1.通用选择器：*{}

2.元素选择器：元素{}

3.id选择器

4.类选择器

5.群组选择器：选择器1，2，...n{}

6.后代选择器：选择器1 选择器2...{}

7.子代选择器：选择器1>选择器2...{}

8.伪类选择器：①:link 未访问时；②:visited 访问后；③:hover 鼠标悬停；④:active 元素激活状态下；⑤:focus 获得焦点时；

二、复杂选择器

1.兄弟选择器

①相邻兄弟选择器：选择器1+选择器2：获取紧挨在选择器1后的兄弟元素

②.通用兄弟选择器：选择器~选择器：获取元素后面所有符合条件的兄弟元素

2.属性选择器：

①[attr]{}

②[attr1][attr2]{} 

③[attr=value]{}

④elem[attr=value]{}

⑤elem[attr1][attr2]{}

⑥[attr^=value]{}——开头

⑦[attr$=value]{}——结尾

⑧[attr*=value]{}——含有

⑨[attr~=value]{}——含有value这个单词的元素（前后空格）

3.伪类选择器

①目标伪类：:target{}   锚点被激活时，让锚点元素应用的样式

②结构伪类：:first-child{} 找大哥

                      :last-child{}找小弟

                      :nth-child(n)

③:empty：找内部无任何元素的标签，文本，空格，回车也不能有

④:only-child{}：父元素的独生子

⑤:ont(:选择器)：否定伪类

⑥:first-letter{}：匹配元素的首行首字母

⑦:first-line{}：匹配元素首行

⑧:selection{}：匹配用户选择的文本