网站建设 考题,网页制作考证视频,广告营销是做什么的,杂志在线设计网站文章目录 cascading声明冲突应用重置样式表a元素的类选择器顺序问题 cascading
cascading – 层叠 解决声明冲突的过程#xff0c;浏览器会自动处理#xff1b;就是计算样式的权重#xff0c;权重大的就被选择#xff1b;
声明冲突
是指多个选择器选中同一个标签#x… 文章目录 cascading声明冲突应用重置样式表a元素的类选择器顺序问题 cascading
cascading – 层叠 解决声明冲突的过程浏览器会自动处理就是计算样式的权重权重大的就被选择
声明冲突
是指多个选择器选中同一个标签如果属性名相同属性不同则会产生冲突如果发生冲突浏览器会触发自己的层叠机制。层叠过程分成3个过程:依次从比较重要性、比较特殊性、比较原次序来触发层叠机制 比较重要性 作者样式中!important属性样式作者样式表中的普通样式浏览器默认样式表的样式 比较特殊型 总体规则就是看选择器选择器针对的范围越小那么对应的选择器越特殊那么久选择对应的声明冲突的选择器样式。 行内样式 id选择器 类、伪类选择器、属性选择器 元素、伪元素选择器 计算逻辑就是通过选择器计算出一个4位数最终那个选择器的数值大就用那个选择器的声明冲突的属性 千位如果是内联样式记1否则记0百位等于选择器中所有id选择器的数量十位等于选择器中所有类选择器、属性选择器、伪类选择器的数量个位等于选择器中所有元素选择器、伪元素选择器的数量 以上的这些数量逢256进1测试样式如下: stylea {/* 0001 */color: red;}div ul a {/* 0003 */color: green;}#mydiv #myul a {/* 0201 */color: gray;}#mydiv #myul .mylink {/* 0210 */color: #008c8c;}#mydiv #myul a:link {/* 0211 */color: chocolate;}/stylediv idmydivul idmyullia hrefhttps://1234455.com classmylink比较特殊性/a/li/ul/div比较顺序 浏览器从上到下分析代码后面的css覆盖前面的css样式
应用
重置样式表
书写一些作者样式覆盖浏览器的默认样式用重置样式表覆盖浏览器默认样式表然后再编写样式表覆盖重置样式表样式 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tGeZTnKp-1692416057143)(images/resetCSS.png)] 重置样式表就是先重置样式表保证在每个浏览器中的显示效果一样然后在这个默认的样式表基础上编写个人的样式表。重置样式表的意义就在于使重置样式表可以复用不然每个项目的样式表都要考虑浏览器的默认样式表。
a元素的类选择器顺序问题
a:linka:visiteda:hovera:active 这4中选择器的优先级是一样的那么后出现的会覆盖前面的当多种情况出现时要按照预期正确显示就要按照上面的顺序进行css编写
