一、CSS选择器

1.什么是选择器

选择器用于定位我们想要样式化的网页HTML元素。

2.基本选择器

名称 写法 示例 描述
标签选择器 标签{声明;…} p{color:red} 所有的p标签字体颜色为红色
类选择器 .类名{声明;…} .style{color:red} class属性值为style的标签，字体颜色设为红色
ID选择器 #ID{声明;…} #txt1{color:red} id属性值为txt1的标签，字体颜色设为红色
通配符选择器 {声明;…} {color:red} 所有标签的颜色都为红色

注：使用通用选择器时要小心。因为它适用于所有的元素，对于大型网页利用它可能对性能产生明显的影响，网页下载速度比预期要慢。

3.属性选择器

写法 示例 描述
[属性名] [type]{color:red} 所有包含type属性的标签，字体颜色设为红色
[属性名=属性值] [type=text]{color:red} 所有包含type属性且值为text的标签，字体颜色设为红色
[属性名^=属性值] [title^=link]{color:red} 所有包含title属性且值以link开头的标签，字体颜色设为红色
[属性名$=属性值] [title$=link]{color:red} 所有包含title属性且值以link结尾的标签，字体颜色设为红色
[属性名=属性值] [title=link]{color:red} 所有包含title属性且值包含link的标签，字体颜色设为红色

4.伪类选择器

写法 示例 描述
:link a:link{color:red} 未被访问的链接
:visited a:visited{color:red} 已被访问的链接
:hover a:hover{color:red} 鼠标悬停在超链接
:active a:active{color:red} 鼠标点击超链接，激活超链接时

注：设置时要严格以上的顺序

5.组合选择器

名称 写法
并集选择器 S1,S2,…{声明;…}
交集选择器 S1.S2{声明;…}
后代选择器 S1 S2{声明;…}
子选择器 S1>S2{声明;…}
相邻选择器 S1+S2{声明;…}
兄弟选择器 S1~S2{声明;…}

6.过滤选择器

first-child:选择第一个元素
last-child:选择最后一个元素
nth-child(n):选择第n个元素，n从1开始
nth-child(3n):选择3的倍数行的元素,n从1开始
nth-child(3n+2):选择2，5，8，n从0开始
nth-child(even):选择偶数行的元素，如2，4，6，8…
nth-child(odd):选择奇数行的元素，如1，3，5，7….
:not(选择器)：选择除了选择器匹配的以外的元素

7.表单选择器

:enabled：选择启用的元素
:disabled:选择禁用的元素
:checked:选择选中的元素
:focus:选择获得焦点的元素