千锋前端浠浠呀老师HTML+CSS教程,零基础web前端开发入门必看视频

语法:选择器{属性:属性值;属性:属性值;}
选择器:
概念:查找到页面元素的一种方法(给谁添加样式谁就是选择器)
分类:
1、标签选择器:标签的名字就是选择器
语法:div{}
特点:能够匹配到页面中同一类型标签,无论嵌套层级有多深,匹配范围较广
2、class选择器(类选择器)
语法:
HTML:
<div class="box"></div>
CSS:
.box{样式}
特点:
1、class名可以重复使用(不同标签可以使用相同类名)
2、一个标签可以有多个类名,类名之间用空格隔开
3、id选择器
语法:
HTML:
<div id="content"></div>
CSS:
#content{样式}
特点:
id选择器具有唯一性(id名不能重复使用,id名不能有多个)
4、通配符选择器
语法:*
表示匹配到页面中所有元素
通常用:
*{
margin:0;//取消掉外边距
padding:0;//取消掉内边距
}
选择器的权重:
标签选择器 class选择器 class选择器
class选择器 id选择器 id选择器
标签选择器 id选择器 id选择器
选择器的权重值:
通配符:0 (0000)
标签选择器:1 (0001)
class选择器:10 (0010)
id选择器:100 (0100)
行内样式:1000 (1000)
!important:无穷大
使用不同选择器修饰同一标签,相同属性被覆盖(选择器权重大的属性生效),不同属性保留
关系选择器(层级选择器)
1、后代关系选择器
符号:空格
2、父子关系选择器
符号:>
注意:关系选择器中,选择器的权重是可以进行相加的
选择器权重相同,后面的代码会覆盖前面的代码
注意:文本属性具有继承性
超链接动态伪类选择器(按照以下顺序来书写)
:link ------------- 访问前
:visited ------------- 访问后
:hover ------------- 鼠标滑过(常用,可以应用在任意一个标签上)
:active ------------- 鼠标激活瞬间
群组选择器:
语法:选择器1,选择器2,选择器3{样式}
注意:群组选择器权重各算各的,互不干扰