选择器详解
1.通配符选择器
*{...}
2.标记选择器
标记名称{...}
3.class选择器
.class值{...}
4.id选择器
作用
匹配指定id的样式
语法
#id值{...}
5.群组选择器
定义一组选择器的样式
语法
选择器1,选择器2{...}
6.后代选择器
根据元素出现的位置关系来匹配
语法
选择器1 选择器2{...}
说明:至少是父子关系
7.子代选择器
说明:必须是父子关系
语法
选择器1>选择器2{...}
8.伪类选择器
1.链接伪类
选择器:link 代表元素未访问过的状态
选择器:visited 代表元素访问过的状态
实例:
代码语言:javascript复制a:link{color:black;} /*选择器:link{...写入你的样式...}*/
a:visited{color:red;}/*选择器:visited{...写入你的样式...}*/
2.动态伪类
选择器:hover 代表鼠标划过的样式
选择器:active 代表鼠标激活的样式
选择器:focus 代表获取焦点的状态
代码语言:javascript复制a:link{color:#122E67;text-decoration:none;}/*表示链接初始状态的时候*/
a:hover,active{color:#FF9617;text-decoration:underline;} /*表示鼠标被花果和鼠标长按(点击)状态*/
9.选择器的优先级(谁的优先级高使用谁的样式)
谁的权值大谁的优先级高
选择器 权值
标记选择器 1
class选择器 10
id选择器 100
内联样式 1000
10.!important
作用
调整样式的优先级
用法
选择器{... !important} 则该选择器的优先级最高
建议
1.尽量少使用
2.IE6及以下不支持
优先级进行计算,谁的优先级最大则该样式被选择。