好程序员HTML5培训教程-css样式的继承性、层叠性 、优先级

47次阅读

共计 1116 个字符,预计需要花费 3 分钟才能阅读完成。

好程序员 HTML5 培训教程 -css 样式的继承性、层叠性、优先级一、css 样式的继承性: 作用:给父元素设置一些属性,子元素也可以使用应用场景:一般用于设置网页上的一些共性信息,例如网页的文字颜色,字体,文字大小等内容。优化代码,降低工作量注意点:1. 并不是所有的属性都可以继承,、只有 color/font-/text-/ line 开头的属性才能继承;2. 在 css 的继承中,不仅仅是儿子可以继承,只要是后代都能继承 3. 继承性中的特殊性 3.1 a 标签的文字和颜色 和下划线是不能继承父元素的——举例:复制代码 <style type=”text/css”>div{color:redfont-size:24px;text-decoration: none;}</style><body>
< div>
<h1> 我是大标题 </h1>
<a heref=”#”> 我是超链接 </a>
<p> 我是段落 </p>
</div>
(上面的代码,只有 p 继承了 div 设置的属性,而 a 标签是不能继承父元素的属性, 颜色不会变红,下划线也不会被去掉)复制代码 3.2 h 标签的文字大小也是不能继承父元素的 (见上面代码,<h1> 标签中我是大标题不会继承 <div> 的 font-size:24px; 属性,所以需要给 <h1> 单独写个 css 样式:h1{font-size:24px;} 应用场景:一般用于设置网页上的一些共性信息,例如网页的文字颜色,字体,文字大小灯内容格式:body{属性:值;}二、层叠性比如 p 标签,给 p 标签设置 id 和 class 类名,选择器上选择 p 和 p 的 id 或者 class 类名,设置相同的属性,就是层叠性三、优先级:(三一)作用:当多个选择器(比如选择 p 标签和 p 标签里设置的 id 或者 class 昵称),选中同一个标签,并且给同一个标签设置相同的属性时,如何层叠就优先级来确定。2. 优先级判断的三种方式 2.1 是否直接选中,直接选中指的是直接选中要设置 css 样式的标签,和标签的 id 或者 class 类名。(间接选中就是指的是继承性,比如选择 <ul> 那里面的 li 继承 ul 的属性,就称为继承属性)如果是间接选中,谁离目标标签比较近就听谁的。2.2 是否是相同的选择器。如果是相同选择器,那么就是谁写在后面就听谁的。(比如给两个 p 标签设置 css 样式 p{color:blue}p{color:red}那么就会以第二个 p 为标准,文字变成红色 2.3 不同的选择器如果都是直接选中,并且不是相同类型的选择器,那么就会按照选择器的优先级来层叠 id> 类 > 标签 > 通配符 > 继承 > 浏览器默认权重计算如果选择器里有直接选中和间接选中。哪怕是间接的选择器为 id 选择器,也会优先实行直接选中的效果。感谢关注好程序员前端教程分享!

正文完
 0