高级选择器解析
一、什么是伪类?
1、伪类与伪元素区别的方法在于伪类是只有一个冒号: 而伪元素
有双冒号::(伪元素是不存在的类,理解)
2、分类:
状态类:
:checked,通常用于radio checbox被选中时的状态,也
可搭配lable使用。
:hover,鼠标经过时的状态。
:active,元素被激活时的状态(鼠标按下去称为激活),
一般用于a标签。
:focus,一般用于input被聚焦时的状态(鼠标在输入框准备
输入时称为聚焦)
关于伪类还用专门用于a标签的伪类:
1、a:link,未被访问的链接
2、a:visited,访问过的链接
3、a:active,激活时的状态
注意!:状态类写法分两种,比如 li:hover 表示选择li本体,li:hover>a表示选择li下面的a元素,状态类选择器只能向下或者向兄弟元素,兄弟元素的子元素选择,且不能选择祖先元素(关系选择器没有向父级的)
2、结构类:
1、:nth-child(n),n(单写n表示无穷大)是被选择的个
数写法有(2n 选中2的倍数的元素),(2n 选择2n-1奇数的元素),关
键字的写法有(odd奇数),(even偶数),xx元素的子元
素第几个,且为xx,先判断序号,在判断元素。
2、:nth-last-child(n),从后面开始选择元素的个数。
倒数开始,
3、:nth-of-type(n),精准定位,忽略其他类型的标签,只
看目标标签,直接给第几个染色,
4、:nth-last-of-type(n),从后面开始选择元素,优先选择类型元素。
3、属性类:
1、语法:input[type="text"] 写法有多种,比较随意
2、[attr^=""]^ 属性值以谁开头(模糊搜索)
3、[attr~=""]~ 属性中包含某值
3、[attr$=""]$ 属性中以谁结尾
4、[attr*=""]* 通配符选择所有含有某*的元素
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。