CSS继承特殊

继承

CSS的某些样式具有继承性。
继承是一种规则,它允许样式不仅作用于某个特定html标签元素,而且应用于其后代
   如:在p中的所有字体都为红色
     p{color:red;}
    <p>三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>

但:只给p标签设置了边框为1像素红色实心边框线
    p{border:1px solid red;}
   <p>三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>

特殊性--权值

标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。

p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/

 

重要性

给某些特殊情况设置最高全职
   p{color:red!important;} 

时间: 2024-08-30 07:16:42

CSS继承特殊的相关文章

css 继承和层叠

css继承 1.css 可以继承的是背景(background).字体(font).文本(text) 宽高.浮动的元素不会继承. 2.css样式:浏览器默认样式.用户指定样式.作者定义样式. 3.css优先级(权值) 选择器   a  b  c   d 内嵌     1   0   0  0 id       0   1   0   0 属性/伪类 0   0   1   0 元素         0   0    0   1 !important 最高 一般:内嵌>内联/外部 eg: #con

谈谈一些有趣的CSS题目(四)-- 从倒影说起,谈谈 CSS 继承 inherit

开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧. 不断更新,不断更新,不断更新,重要的事情说三遍. 所有题目汇总在我的 Github . 4.从倒影说起,谈谈 CSS 继承 inherit 给定一张有如下背景图的 div: 制作如下的倒影效果: 方法很多,但是我们当然要寻找最快最便捷的方法,至少得是无论图

CSS 继承

1.说明解释   -  TOP 这里DIV CSS 继承是指我们设置上级(父级)的CSS样式,上级(父级)及以下的子级(下级)都具有此属性.一般只有文字文本具有继承特性,如文字大小.文字加粗.文字颜色.字体等. 2.实例:   -  TOP <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <

开发路程(26):CSS继承—深入剖析

CSS的继承是指被包在内部的标签将拥有外部标签的样式性质.继承特性最典型的应用通常发挥在整个网页的样式预设,即整体布局声明.而需要要指定为其它样式的部份设定在个别元素里即可达到效果.这项特性可以给网页设计者提供更理想的发挥空间.但同时继承也有很多规则,应用的时候容易让人迷惑. CSS允许我们为文档设置更为丰富且便于修改的外观.我们现在主要想和朋友们一起对CSS的继承性进行一点深入的探讨. CSS的一个主要特征就是继承,它是依赖于祖先—后代的关系的.继承是一种机制,它允许样式不仅可以应用于某个特定

css选择器、css继承关系、css盒子模型

一.摘要 总结前端部分css选择器.css继承关系.css盒子模型等相关知识,并对容易出错的地方进行分析说明. 二.原因 在开发前端页面时如果对css选择器.继承关系,层叠,以及padding.margin区别和浮动问题理解不到位,会导致不知道什么时候该用哪种方法来处理问题.此文档是针对这些问题进行说明. 以下是对相关知识点的总结与分析: 三.选择器 1.基本选择器 (1)* 通配符选择器  代表所有元素 例子: *{ margin:0; padding:0;} (2)标签选择器 代表网页中的所

CSS 继承深度解析

FROM ME: 之前在研究前端性能优化的时候,就有学习关于CSS中“善用CSS中的继承”. 原文:CSS Inheritance, The Cascade And Global Scope: Your New Old Worst Best Friends 译文:掘金翻译计划 我酷爱模块化设计.长期以来我都热衷于将网站分离成组件,而不是页面,并且动态地将那些组件合并到界面上.这种做法灵活,高效并且易维护. 但是我不想我的设计看上去是由一些不相关的东西组成的.我是在创造一个界面,而不是一张超现实主

CSS继承的特殊性

p{color:red;} .first{color:green;} <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩.</p> 有的时候我们为同一个元素设置了不同的CSS样式代码,那么元素会启用哪一个CSS样式呢?我们来看一下上面的代码. p和.first都匹配到了p这个标签上,那么会显示哪种颜色呢?green是正确的颜色,那么为什么呢?是因为浏览器是根据权值来判断使用哪种css样式的,权

CSS继承、层叠和特殊性

1.继承 (1)样式应用于某个特定的HTML标签元素,而且应用于其后代. (2)但某些标签不适用,如border: (3)例子:p{color:red;}设置了颜色 <p class="first"> <p id="second"> 效果一样. 2.特殊性 (1)当标签匹配多个样式,浏览器根据权值来判断适用哪种CSS样式,权值高就使用哪种. (2)例子: p{color:red;} .first{color:green;} <p cla

CSS 继承和优先级

CSS继承性 CSS属性继承:外层元素的样式,会被内层元素进行继承. 多个外层元素的样式,最终都会“叠加”到内层元素上. 什么样的CSS属性能被继承呢? CSS文本属性都会被继承的: color. font-size.font-family.font-style. font-weight text-align.text-decoration.text-indent.letter-spacing.line-height 提示:<body>中的CSS属性,会被所有的子元素继承. CSS优先级 (1