首页 >

CSS样式继承和样式权重 – CSS – 前端,浏览器加载css

透明度 css,css选中li,css 国外古风网站,html css做网页布局,css 转化块级元素,css怎么对边框设置阴影,浏览器加载cssCSS样式继承和样式权重 - CSS - 前端,浏览器加载css

样式的继承:为一个元素设置的样式,同时也会应用到它的后代元素上去。

继承是发生在祖先元素和后代元素上面

继承的设计是为了方便开发,利用继承可以将一些通用的样式统一设置到共同的祖先元素上面,这样只需要设置一次就可以让所有的元素都有该样式。

注意:并不是所有的样式都会被继承,常见的有背景、布局相关的样式一般都不 会被继承。(例如 transparent、background、position相关内容)

在为父元素设置背景颜色而其中子元素也会显示出相同的背景颜色,这并不意味着 background-color 样式可以被继承,而是因为 background-color 样式的默认值为 transparent 透明的,所以子元素才会显现出父元素的背景颜色。

<div>偶是div<span>偶是子元素span</span></div>
div{
background-color:skyblue;
}

透明度 css,css选中li,css 国外古风网站,html css做网页布局,css 转化块级元素,css怎么对边框设置阴影,浏览器加载cssCSS样式继承和样式权重 - CSS - 前端,浏览器加载css


选择器的权重

样式的冲突:当大家通过不同的选择器,选中相同的元素并且对相同的样式设置不同的值,此时就发生了样式的冲突。

选择器的优先级
内联样式1,0,0,0
id选择器0,1,0,0
类和伪类选择器0,0,1,0
元素选择器0,0,0,1
通配选择器0,0,0,0(任何选择器都可以覆盖其样式)
继承的样式没有优先级
!important最高的优先级,甚至超过内联样式

div{
background-color:blue!important;//(这样会把样式的有限级设置到最高)}

注意:
1、优先级一定要慎用。
2、同时存在 通配选择器 和 继承的样式 那么优先显示通配选择器所设置样式。
3、如果优先级计算后相等,则优先使用靠下的样式,下面的样式会把上面样式覆盖
4、比较优先级的时候,需要将所有的选择器的优先级相加计算,最后优先级越高,越优先显示(分组选择器是优先计算的)
5、选择器的累加不会超过其最大的数量级,类选择器所累计的优先级越高,也不会超过id选择器(不会越级)



CSS样式继承和样式权重 - CSS - 前端,浏览器加载css
  • 类选择器语法 - CSS - 前端,css怎么将网页铺满全屏
  • 类选择器语法 - CSS - 前端,css怎么将网页铺满全屏 | 类选择器语法 - CSS - 前端,css怎么将网页铺满全屏 ...

    CSS样式继承和样式权重 - CSS - 前端,浏览器加载css
  • css3 谷歌扩展 |天猫固定背景css层级
  • css3 谷歌扩展 |天猫固定背景css层级 | css3 谷歌扩展 |天猫固定背景css层级 ...

    CSS样式继承和样式权重 - CSS - 前端,浏览器加载css
  • 要求运行流畅续航 - CSS - 前端,css 搜索框制作
  • 要求运行流畅续航 - CSS - 前端,css 搜索框制作 | 要求运行流畅续航 - CSS - 前端,css 搜索框制作 ...