资深的食品行业网站开发,wordpress更换网站数据库,桂林两江四湖夜游,内销常用网站css有三个非常重要的三个特性#xff1a;层叠性、继承性、优先级
1.1 层叠性
想通选择器给设置想听的样式#xff0c;此时一个样式就会覆盖#xff08;层叠#xff09;另一个冲突的样式。层叠性主要是解决样式冲突的问题。 !DOCTYPE html
html langen层叠性、继承性、优先级
1.1 层叠性
想通选择器给设置想听的样式此时一个样式就会覆盖层叠另一个冲突的样式。层叠性主要是解决样式冲突的问题。 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {color: red;}div {color: pink;}/style
/head
bodydiv长江后浪推前浪前浪死在沙滩上/div
/body
/html 层叠性原则
样式冲突遵循就近原则样式不冲突不会层叠
1.2 继承性
现实中的继承我们继承了父亲的姓
CSS中的继承子标签会继承父标签的某些样式如文本颜色和自豪简单的理解就是子承父业
恰当地使用继承可以简化代码降低CSS样式的复杂性子元素可以继承父元素的样式text,font,line-这些元素开头的可以继承以及color属性继承性口诀龙生龙凤生凤老鼠的孩子会打洞
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {color: pink;font-size: 14px;}/style
/head
bodydivp龙生龙凤生凤老鼠生的孩子会打洞/p/div
/body
/html1.2.1行高继承 body { font:12px/1.5 Microsoft YaHei; } 行高可以跟单位也可以不跟单位如果子元素没有设置行高则会继承父元素的行高为1.5此时子元素的行高是当前资源素的文字大小*1.5
1.3 优先级
当同一个元素的指定多个选择器就会有优先级产生。
选择器相同则执行层叠性选择器不同则根据选择器权重执行
选择器选择器权重继承 或者 *0元素选择器1类选择器、伪类选择器10ID选择器100行内样式 style1000!important∞无穷大 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {color: pink!important;}.test {color: red;}#demo {color: green;}/style
/head
bodydiv classtest iddemo stylecolor: purple;你笑起来真好看/div/body
/html
注意事项
权重是有4组数字组成的但是不会有进位。可以理解为类选择器永远大于元素选择器id选择器永远大于类选择器依此类推等级判断从左向右如果某一位数值相同则判断下一位数值。可以简单记忆法通配符和继承权重为0,标签选择器为1类选择器10id选择器100行内样式表1000,!important无穷大继承的权重是0,如果钙元素没有直接选中不管父元素权重有多高子元素得到的权重都是0。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle#father {color: red;}p {color: pink;}/style
/head
bodydiv idfatherp你还是很好看/p/div
/body
/html 权重叠加如果是复合选择器则会有权叠加需要计算权重
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleli {color: red;}ul li {color: rgb(37, 74, 37);}.nav li {color: pink;}/style
/head
bodyul classnavli大猪蹄子/lili大肘子/lili猪尾巴/li/ul
/body
/html div ul li ------0,0,0,3
.nav ul li ------0,0,1,2
a:hover ------0,0,1,1
.nav a --------0,0,1,1
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.nav li{color: red;}li {color: pink;}.nav .pink {color: pink;font-weight: 700;}/style
/head
bodyul classnavli classpink人生四大悲/lili家里没宽带/lili网速不够快/lili手机没流量/lili学校没wifi/li/ul
/body
/html
