1>什么是选择器
一个HTML页面中有很多的元素,不同的元素可能会有不同的样式,有些元素又需要设置相同的样式,
选择器就是用来从HTML页面中查找特定一个或一组元素,找到之后就可以为它们设置样式了。
选择器为样式规则指定一个作用范围。
基础选择器包括:
- 标签选择器
- 类选择器
- ID选择器
- 通用选择器
2>基础选择器的用法
2.1>标签选择器---故名思议,通过标签名来选择元素
2.2>类选择器:所有样式类含 xx字段的元素,格式: .类值
作用范围:所有标签中 class属性等于c1的标签,字体颜色设置成红色
2.3>ID选择器:顾名思义,通过标签的id值选择标签,格式:#id值
作用范围:标签中id=name的元素 字体颜色设置成红色,注:同一个html页面中不能存在相同的id,
2.4>通用选择器:使用 * 表示所有元素
2.5>各基础选择器优先级
ID选择器 > 类选择器 > 标签选择器 > 通用选择器
3>高级选择器
3.1>并集选择器,又称分组选择器,用于定义多个不同类型标签相同的样式。
3.2>交集选择器:通过标签和属性(类属性或id属性)来限制作用范围,
3.3>后代选择器
作用于某个标签所包含的所有指定元素,
如 div p {xx:xx},定义div下面所有p标签,样式xx=xx
3.4>子元素选择器
通过 > 连接,仅作用于子元素
如 div p {xx:xx},定义直属div下面的p标签,样式xx=xx
3.5>毗邻选择器
如 div+p {xx:xx}
找到所有紧挨在div后面的第一个p标签,设置xx样式=xx
3.6>兄弟选择器
如 div~p {xx:xx}
找到所有div标签后面同级的p标签,设置xx样式=xx
3.7>属性选择器
除了HTML元素的id属性和class属性外,还可以根据HTML元素的特定属性选择元素
--->根据属性查找 [属性]{xx:xx}
--->根据属性和值查找 [xx='xx']{xx:xx}
--->其他扩展用法
找到所有title属性以aa开头的元素 [title^='aa']{xx:xx}
找到所有title属性以aa结尾的元素 [title$='aa']{xx:xx}
找到所有title属性包含aa的元素 [title*='aa']{xx:xx}
找到所有title属性(有多个值或值以空格分割)中有一个值为aa的元素 [title~='aa']{xx:xx}
3.8>表单常用
input[type="text"] { background-color: #13ff67; }