做网站市场报价步登顶,最新网站建设技术,网业是什么行业,wordpress4.9博客模板0. 写在前面 很多的学习其实并不知道在学什么#xff0c;学一个新东西学着学着就变成了抄代码#xff0c;背概念。把看视频学习变成了一个赶进度的任务#xff0c;到头来只学到了一些皮毛。 文章目录 0. 写在前面1. CSS三大特性——层叠性2. CSS三大特性——优先级3. CSS三…0. 写在前面 很多的学习其实并不知道在学什么学一个新东西学着学着就变成了抄代码背概念。把看视频学习变成了一个赶进度的任务到头来只学到了一些皮毛。 文章目录 0. 写在前面1. CSS三大特性——层叠性2. CSS三大特性——优先级3. CSS三大特性——继承性 1. CSS三大特性——层叠性
层叠性相同选择器同等权重对同一个元素设置样式时 不冲突的样式样式都生效 冲突的样式会根据“就近原则”书写位置接近元素的样式会将位置远的样式覆盖 示例如下
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleThree Characteristics - Stackability/title.div1 {color: red;}.div1 {font-size: 50px;color: yellowgreen;}
/headbodydiv classdiv1我是div1/div/body/html实际上层叠性就是说最底下的样式会最优先生效这并不难理解实际上就和程序的执行顺序一样
2. CSS三大特性——优先级
优先级权重不同选择器选择同一个元素并且设置相同样式时CSS会根据优先级选择使用样式。 选择器的权重 行内样式 1,0,0,0id选择器 0,1,0,0类、属性、伪类选择器 0,0,1,0标签选择器 0,0,0,1通配符、继承 0,0,0,0注意
权重由四位整数组成权重高优先执行。权重从左到右依次比较如高位相同则比较下一位权重可以叠加但是不会进位选择器分组单独计算
示例如下
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleThree Characteristics - priority/title/* #d1 {color: yellowgreen;} *//* 0,0,0,10,0,1,00,0,1,1 */div[classdiv1] {color: orange;}/* 0,0,1,00,0,1,00,0,2,0 */.div1.div2 {color: red;}
/headbodydiv classdiv1 idd1我是div/div
/body/html可以看到每一位的优先级都是独立计算的而且不会进位 这里的属性选择器实际上是两部分组成标签选择器属性选择器这也是在2. 选择器超长大合集中提到过的
3. CSS三大特性——继承性
继承性一个元素的某些样式可以被后代元素继承 优点合理使用继承性可以简化代码 注意
通常文本、字体相关样式可以继承。但是背景、布局相关的样式不会被继承。a 链接不能继承文本颜色与下划线h 标题标签不能继承字体大小
示例如下
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlethree Characteristics - Inheritance/title.father {color: red;background-color: #c7decc;}body {font-size: 20px;}
/headbodydiv classfather我是fatherdiv classson我是son/divspan我是孙子span/spana href#超链接/ah1我是标题/h1/div/body/html可以看到father里面的标签继承了father的样式father整个的继承了body的字体大小也就是font-size。 也可以看到a不能继承字体的颜色h不能继承字体的大小
