css样式的继承性、层叠性、优先级有什么作用-创新互联
这篇文章主要讲解了“css样式的继承性、层叠性 、优先级有什么作用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css样式的继承性、层叠性 、优先级有什么作用”吧！
一、css样式的继承性:
作用：给父元素设置一些属性，子元素也可以使用
应用场景：
一般用于设置网页上的一些共性信息，例如网页的文字颜色，字体，文字大小等内容。优化代码，降低工作量
注意点：
1.并不是所有的属性都可以继承，、
只有color/font-/text-/ line开头的属性才能继承；
2.在css的继承中，不仅仅是儿子可以继承，只要是后代
都能继承
3.继承性中的特殊性
3.1 a标签的文字和颜色
和下划线是不能继承父元素的——举例：
复制代码
< div>
我是大标题
我是段落
（上面的代码，只有p继承了div设置的属性，而a标签是不能继承父元素的属性,颜色不会变红，下划线也不会被去掉）
复制代码
3.2 h标签的文字大小也是不能继承父元素的(见上面代码，
标签中我是大标题不会继承的
font-size:24px;属性，所以需要给单独写个css样式：h2{font-size:24px;}
应用场景：
一般用于设置网页上的一些共性信息，例如网页的文字颜色，
字体，文字大小灯内容
格式：
body{属性：值;}
二、层叠性
比如p标签，给p标签设置id和class类名，选择器上选择p
和p的id或者class类名，设置相同的属性，就是层叠性
三、优先级：（三一）
作用：当多个选择器（比如选择p标签和p标签里设置的id或者class昵称），选中同一个标签，并且给同一个标签设置相同的属性时，
如何层叠就优先级来确定。
2.优先级判断的三种方式
2.1
是否直接选中，直接选中指的是直接选中要设置css样式的标签，和标签的id或者class类名。（间接选中就是指的是继承性，比如选择
那里面的li继承ul的属性，就称为继承属性）
如果是间接选中，谁离目标标签比较近就听谁的。
2.2是否是相同的选择器。
如果是相同选择器，那么就是谁写在后面就听谁的。（比如给两个p标签设置css样式
p{color:blue}
p{color:red｝
那么就会以第二个p为标准，文字变成红色2.3不同的选择器
如果都是直接选中，并且不是相同类型的选择器，那么就会按照
选择器的优先级来层叠
id>类>标签>通配符>继承>浏览器默认
权重计算
如果选择器里有直接选中和间接选中。哪怕是间接的选择器为id选择器，也会优先实行直接选中的效果。
感谢各位的阅读，以上就是“css样式的继承性、层叠性 、优先级有什么作用”的内容了，经过本文的学习后，相信大家对css样式的继承性、层叠性 、优先级有什么作用这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！
网页名称：css样式的继承性、层叠性、优先级有什么作用-创新互联
地址分享：http://ybzwz.com/article/ccspjc.html
单独写个css样式：h2{font-size:24px;}
应用场景：
一般用于设置网页上的一些共性信息，例如网页的文字颜色，
字体，文字大小灯内容
格式：
body{属性：值;}
二、层叠性
比如p标签，给p标签设置id和class类名，选择器上选择p
和p的id或者class类名，设置相同的属性，就是层叠性
三、优先级：（三一）
作用：当多个选择器（比如选择p标签和p标签里设置的id或者class昵称），选中同一个标签，并且给同一个标签设置相同的属性时，
如何层叠就优先级来确定。
2.优先级判断的三种方式
2.1
是否直接选中，直接选中指的是直接选中要设置css样式的标签，和标签的id或者class类名。（间接选中就是指的是继承性，比如选择
- 那里面的li继承ul的属性，就称为继承属性）
如果是间接选中，谁离目标标签比较近就听谁的。
2.2是否是相同的选择器。
如果是相同选择器，那么就是谁写在后面就听谁的。（比如给两个p标签设置css样式
p{color:blue}
p{color:red｝
那么就会以第二个p为标准，文字变成红色
2.3不同的选择器
如果都是直接选中，并且不是相同类型的选择器，那么就会按照
选择器的优先级来层叠
id>类>标签>通配符>继承>浏览器默认
权重计算
如果选择器里有直接选中和间接选中。哪怕是间接的选择器为id选择器，也会优先实行直接选中的效果。
感谢各位的阅读，以上就是“css样式的继承性、层叠性 、优先级有什么作用”的内容了，经过本文的学习后，相信大家对css样式的继承性、层叠性 、优先级有什么作用这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！
网页名称：css样式的继承性、层叠性、优先级有什么作用-创新互联
地址分享：http://ybzwz.com/article/ccspjc.html
