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{}:匹配用户选择的文本

猜你喜欢

转载自blog.csdn.net/qq_37547964/article/details/106361771