6.样式的继承与权重
设置在祖先元素上的样式,也会被同时应用到后代元素上
<b><font color="#b71c1c">所有的布局,背景,边框等相关的样式都不会被继承</font></b>
<b><font color="#5b79e8">选择器权重</font></b>
继承的样式:没有优先级
通配选择器:0000
元素选择器:0,0,0,1
类和伪类选择器:0,0,1,0
id选择器:0,1,0,0
内联样式:1,0,0,0
比较优先级时,需要将多个选择器的优先级一起计算<br><b>优先级高的优先显示,优先级的累加无法跨域数量级,</b><br>如果优先级一样,则优先显示靠下的样式<br>如果为样式添加 !important,则该样式会获得最高的优先级,优先于其他样式显示,慎用!<br>注意:分组选择器优先级都是单独计算的!
div.box1 0,0,1,1<br> .box1 0,0,1,0<br><br> #box1 0,1,0,0<br> .box1.box2.box3.box4.box5.box6.box7.box8.box9.box10.box11{} 0,0,11,0
1.简介
三种样式
内联样式
内部样式
<b><font color="#d32f2f">外部样式</font></b>
<b><font color="#b71c1c">3.基本选择器</font></b>
5.伪类
伪类是一个特殊的类,用来表示元素的状态
用 :visited来访问过的超链接
a的伪类
:visited
访问过的链接
由于隐私原因,只能改变文字颜色
<b><font color="#d32f2f">结构伪类</font></b>
:first-of-type
同类型的第一个子元素
:last-of-type
同类型的最后一个子元素
:nth-last-of-type
同类型倒数第n个元素
伪元素
befor,after
分别选中开始或结束位置,从而为其添加内容
1.通过它可以为元素添加一些统一的符号<br>2.也可以在特殊场景下通过它们来调整一下页面的样式
7.单位
长度单位
像素(px)
每一台设备的像素大小是不同的,越清晰的设备像素就越小
百分比(%)
设置%会根据父元素指定属性的百分比计算
em
1em = 1 font-size(当前元素的)
rem(root em) 1rem = 1根元素的font -size(html根元素)
颜色单位
颜色名
直接用颜色名来设置颜色
比如:red、blue、green、yellow、orange ...
rgb值
通过rgb值通过三种不同的颜色组合,来调配不同颜色
red green blue<br>语法:RGB(红色, 绿色, 蓝色)<br>取值范围:0-255<br> 光的三原色
HSL
h 色相 0 - 360<br>s 饱和度 0% - 100%<br>l 亮度 0% - 100%