css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到css选择器。
常用选择器:
标签选择器(针对页面中所有当前类型标签生效)
例如:div{
width:1100px;
height:200px;
}class选择器 – 样式中(css)定义好后,在结构中(html)可以多次重复使用。
例如: 结构中:`<div` class=”class名”>`</div>` 样式中:.class名{ 样式 }
id选择器 – 样式(css)定义好后,在结构中(html)中使用,通常用于JavaScript。具有唯一性
例如:
结构中:<div
id=”id名”></div>
样式中:#id名{ 样式 }群组选择器:可以对多个不同的选择器设置相同的样式
格式:选择器1,选择器2,选择器3 { 样式 }
使用时可以任意组合不同的选择器后代选择器 格式 :父选择器 子选择器{ 样式 }
在a选择器区域内的所有b选择器都会生效通配符选择器:
*{ margin:0; padding:0; }伪类选择器: a:hover{ 鼠标悬停时显示的样式 }
a:link{ 默认的链接样式 }
a:visited{ 已访问过的链接样式 }
a:hover{ 鼠标悬停时的样式 }
a:active{ 鼠标按住时的样式 }
注意书写顺序:l – v – h – a 爱恨原则:love and hate父子选择器:只选中直接为子辈的元素
.box>h1{样式}
选择器的命名规则:
1、 一定注意不能使用数字开头,必须使用字母开头,起名尽量起有意义的与页面相关的名字
2、 特殊的符合的使用,减号(-)和下划线(_),不能使用其他符号
3、 起名可以根据(内容,位置,大小)去命名
选择器的优先级(权重关系)
条件1:当有不同选择器对同一个对象进行样式指定时;
条件2:并且两个选择器有相同的属性被赋予不同的值时;
这样就得出一个结论:优先级由小到大
标签选择器-Class选择器- Id选择器-行内样式
!important; 最高级别,提高样式权重,拥有最高的优先级