css选择器的那些类型

CSS选择器分类

第一种:简单选择器
1.通用选择器：{}
2.元素选择器：元素{}
3.id选择器 #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)里面有写奇数和偶数 odd奇数 even 偶数 也可以写1和2
③元素:empty：找内部无任何元素的标签，文本，空格，回车也不能有
④元素:only-child{}：父元素的独生子
⑤元素:ont(:选择器)：否定伪类
⑥元素:first-letter{}：匹配元素的首行首字母
⑦元素:first-line{}：匹配元素首行
⑧元素:selection{}：匹配用户选择的文本