1

高级选择器解析

一、什么是伪类?
   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*=""]* 通配符选择所有含有某*的元素

安阳
46 声望1 粉丝

« 上一篇
table解析
下一篇 »
伪元素解析