4-伪选择器

一、伪类选择器

作用: 选中指定的任意标签然后设置属性
格式:
1.同级别的第几个

:first-child 选中同级别中的第一个标签

:last-child 选中同级别中的最后一个标签

:nth-child(n) 选中同级别中的第n个标签

:nth-last-child(n) 选中同级别中的倒数第n个标签

:only-child 选中父元素中唯一的标签

注意点: 不区分类型

2.同级同类型的第几个

:first-of-type 选中同级别中同类型的第一个标签

:last-of-type 选中同级别中同类型的最后一个标签

:nth-of-type(n) 选中同级别中同类型的第n个标签

:nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签

:only-of-type 选中父元素中唯一类型的某个标签

3.其它用法

:nth-child(odd) 选中同级别中的所有奇数

:nth-child(even) 选中同级别中的所有偶数

:nth-child(xn+y)

x和y是用户自定义的, 而n是一个计数器, 从0开始递增

:nth-of-type(odd) 选中同级别中同类型的所有奇数

:nth-of-type(even) 选中同级别中同类型的所有偶数

:nth-of-type(xn+y)

x和y是用户自定义的, 而n是一个计数器, 从0开始递增

二、属性选择器

• 作用: 根据指定的属性名称找到对应的标签, 然后设置属性
• 语法格式:

1. [attribute]
   -作用:根据指定的属性名称找到对应的标签, 然后设置属性

2. [attribute=value]
   -作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性
   -最常见的应用场景, 就是用于区分input属性

input[type=password]{}
<input type="text" name="" id="">
<input type="password" name="" id="">

3. 属性的取值是以什么开头的
   [attribute|=value] CSS2
   [attribute^=value] CSS3

两者之间的区别:
CSS2中的只能找到value开头,并且value是被-和其它内容隔开的
CSS3中的只要是以value开头的都可以找到, 无论有没有被-隔开

4. 属性的取值是以什么结尾的
   [attribute$=value] CSS3

5. 属性的取值是否包含某个特定的值得
   [attribute~=value] CSS2
   [attribute*=value] CSS3

两者之间的区别: CSS2中的只能找到独立的单词, 也就是包含value,并且value是被空格隔开的
CSS3中的只要包含value就可以找到, 无论有没有被隔开

三、链接伪类选择器

在CSS中，通过链接伪类可以实现不同的链接状态。所谓伪类并不是真正意义上的类，他的名称是由系统定义的，通常由标记名、类名或id名加“:”构成。超链接标记的伪类有4种，具体如下表所示。顺序固定

另：：focus伪类选择器将样式添加到被选择的元素。例如设置光标所在表单input元素的背景颜色。
input:focus{background-color:yellow;}