一、CSS普通选择器:
1)标签选择器:直接写标签
2)类选择器:用class命名 .加类名 可重复命名
3)Id选择器:用Id命名 #加Id名称 是唯一的
4)通配选择器:用*来定义
5)后代选择器:父选择器+子选择器 (中间用空格隔开)
6)并集选择器:两个父选择器定义(中间用逗号隔开)
7)交集选择器:标签+选择器
8)儿子选择器:需要选中某个元素的直接子元素。(用">"链接两个选择器)
9)!important:只会提升某个属性的优先级,并不能提升整个选择器的权重。
<head>
<style type="text/css">
通配选择器
*{
color: green;
}
标签选择器
p{
color: green;
}
类选择器
.hezi3{
color: green;
}
Id选择器
#box3{
color: green;
}
后代选择器
.hezi2 .hezi3{
color: green;
}
交集选择器
div.hezi3{
color: green;
}
并集选择器
.box2,.box3{
color: green;
}
</style>
</head>
总结:ID>类>标签>通配>继承
继承的权重是0(小于直接指定)
当都是继承的时候再比权重(看谁的权重大)
当权重一样的时候:采取就近原则。
当选择器选中某个元素的时候,就可以统计该元素的权重
百 十 个
id数量 类的数量 标签的数量
权重:一个类选择器远大于一个标签选择器 十位数
一个ID选择器远大于一个类选择器 百位数
二、动态伪类选择器(多用于用户和网站交互的时候):
1.link:链接没有被访问时候的状态
2.visited:链接被访问后的状态
3.hover:鼠标放到连接上时的状态
4.active:鼠标激活链接时的状态
语法:
选择器名:+动态伪类{}
a:link{
color:red;
}
a:visited{
color:blue;
}
a:hove{
color:gray;
}
a:active{
color:green;
}
注意:link和hover不能同时使用。
1.要想同时使用必须把hover放在link和visit的后面;
2.active:必须放在hover后面才好使
(顺序:link,visited,hover,active)
三、focus:
用于设置获取焦点时会给input加上样式
input:focus { color: red; 外边框:(solid:实线 dashed:虚线) outline: cyan dashed 5px; }
`