大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
当在一个样式声明中使用一个 !important 规则时,此声明将覆盖任何其他声明。虽然,从技术上讲, !important 与优先级无关,但它与最终的结果直接相关。使用 !important 是一个 坏习惯 ,应该尽量避免,因为这破坏了样式表中的固有的级联规则 使得调试找bug变得更加困难了。当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时,拥有更大优先级的声明将会被采用。
安新网站建设公司创新互联,安新网站设计制作,有大型网站制作公司丰富经验。已为安新近1000家提供企业网站建设服务。企业网站搭建\外贸网站建设要多少钱,请找那个售后服务好的安新做网站的公司定做!
一些经验法则:
什么的情况下可以使用 !important:
A) 覆盖内联样式
你的网站上有一个设定了全站样式的 CSS 文件,同时你(或是你同事)写了一些很差的内联样式。
全局的CSS文件会在全局范围内设置网站的外观,而直接在各个元素上定义的内联样式可能会覆盖您的全局CSS文件。 内联样式和!important都被认为是非常不好的做法,但是有时你可以在CSS文件里用!important去覆盖内联样式。
在这种情况下,你就可以在你全局的 CSS 文件中写一些 !important 的样式来覆盖掉那些直接写在元素上的行内样式。
继承得到的样式的优先级是最低的;最近的祖先样式比其他祖先样式优先级高;"直接样式"比"祖先样式"优先级高。
1、无继承性的属性
① display:规定元素应该生成的框的类型
② 文本属性:
vertical-align:垂直文本对齐
text-decoration:规定添加到文本的装饰
text-shadow:文本阴影效果
white-space:空白符的处理
unicode-bidi:设置文本的方向
③ 盒子模型的属性:width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、 border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left
④ 背景属性:background、background-color、background-image、background-repeat、background-position、background-attachment
⑤ 定位属性:float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
⑥ 生成内容属性:content、counter-reset、counter-increment
⑦ 轮廓样式属性:outline-style、outline-width、outline-color、outline
⑧ 页面样式属性:size、page-break-before、page-break-after
⑨ 声音样式属性:pause-before、pause-after、pause、cue-before、cue-after、cue、play-during
2、有继承性的属性
① 字体系列属性
font:组合字体
font-family:规定元素的字体系列
font-weight:设置字体的粗细
font-size:设置字体的尺寸
font-style:定义字体的风格
font-variant:设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写 字体的字母与其余文本相比,其字体尺寸更小。
font-stretch:对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。
font-size-adjust:为某个元素规定一个 aspect 值,这样就可以保持首选字体的 x-height。
② 文本系列属性
text-indent:文本缩进
text-align:文本水平对齐
line-height:行高
word-spacing:增加或减少单词间的空白(即字间隔)
letter-spacing:增加或减少字符间的空白(字符间距)
text-transform:控制文本大小写
direction:规定文本的书写方向
color:文本颜色 a元素除外
③ 元素可见性:visibility
④ 表格布局属性:caption-side、border-collapse、border-spacing、empty-cells、table-layout
⑤ 列表布局属性:list-style-type、list-style-image、list-style-position、list-style
⑥ 生成内容属性:quotes
⑦ 光标属性:cursor
⑧ 页面样式属性:page、page-break-inside、windows、orphans
⑨ 声音样式属性:speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、 pitch、pitch-range、stress、richness、、azimuth、elevation
3、所有元素可以继承的属性
① 元素可见性:visibility
② 光标属性:cursor
4、内联元素可以继承的属性
① 字体系列属性
② 除text-indent、text-align之外的文本系列属性
5、块级元素可以继承的属性
text-indent、text-align
CSS 7 种基础的选择器:
ID 选择器, 如 #id{}
类选择器, 如 .class{}
属性选择器, 如 a[href="segmentfault.com"]{}
伪类选择器, 如 :hover{}
伪元素选择器, 如 ::before{}
标签选择器, 如 span{}
通配选择器, 如 *{}
优先级关系 :内联样式 ID 选择器 类选择器 = 属性选择器 = 伪类选择器 标签选择器 = 伪元素选择器
属性后插有 !important 的属性拥有最高优先级
:is()和:not():其伪类在计算选择器数量时当做普通选择器进行计数。
梳理这部分是因为在使用组件模式开发h5应用会出现组件样式修改未生效的问题,在解决样式修改的问题前,需要理清楚CSS样式生效的优先级。样式根据引入和声明需要分开介绍,分为 引入样式优先级 和 声明样式优先级 。
引入样式优先级
引入样式优先级一般是在外部样式、内部样式、内联样式之间应用同一个样式的情况是使用, 优先级如下:
外部样式 | 内部样式 内联样式
外部样式 和 内部样式 ,最后出现的优先级最高,例如:
!-- 内联样式 --spanstyle="color:red;"Hello/spanstyletype="text/css"/* 内部样式 */h3{color:green;}/style!-- 外部样式 style.css --linkrel="stylesheet"type="text/css"href="style.css"/
因此,对于一些重置的样式集,比如 normalize.css/reset.css 必须写在所有样式的前面。
PS: 没有外联样式, 参考 。
声明样式优先级
1. 大致的优先级
一般来说满这个规则:
继承不如指定
!important 内联 ID Class|属性|伪类 元素选择器
:link、:visited、:hover、:active按照LVHA(LoVe HAte)顺序定义
上面是优先级算法反映出的大致结果,在一般的开发中熟记即可。如果需要进一步研究原理,则了解下优先级算法。
2. 优先级算法
选择器的特殊性值分为四个等级,如下:
等级标签内选择符ID选择符Class选择符/属性选择符/伪类选择符元素选择符
示例span style="color:red;"#text{color:red;}.text{color:red;} [type="text"]{color:red}span{color:red;}
标记位x,0,0,00,x,0,00,0,x,00,0,0,x
特点:
每个等级的初始值为0,
每个等级的叠加为选择器出 现的次数相加
不可进位,比如0,99,99,99
依次表示为:0,0,0,0
每个等级计数之间没关联
等级判断从左向右,如果某一位数值相同,则判断下一位数值
如果两个优先级相同,则最后出现的优先级高,!important也适用
通配符选择器的特殊性值为:0,0,0,0
继承样式优先级最低 ,通配符样式优先级高于继承样式
计算示例:
a{color: yellow;} /*特殊性值:0,0,0,1*/
div a{color: green;} /*特殊性值:0,0,0,2*/
.demo a{color: black;} /*特殊性值:0,0,1,1*/
.demo input[type="text"]{color: blue;} /*特殊性值:0,0,2,1*/
.demo *[type="text"]{color: grey;} /*特殊性值:0,0,2,0*/
#demo a{color: orange;} /*特殊性值:0,1,0,1*/
div#demo a{color: red;} /*特殊性值:0,1,0,2*/
生效示例:
ahref=""第一条应该是黄色/a!--适用第1行规则--divclass="demo"inputtype="text"value="第二条应该是蓝色"/!--适用第4、5行规则,第4行优先级高--ahref=""第三条应该是黑色/a!--适用第2、3行规则,第3行优先级高--/divdivid="demo"ahref=""第四条应该是红色/a!--适用第6、7行规则,第7行优先级高--/div
关于伪类LVHA的解释
a标签有四种状态:链接访问前、链接访问后、鼠标滑过、激活,分别对应四种伪类:link、:visited、:hover、:active;
当鼠标滑过a链接时,满足:link和:hover两个伪类,要改变a标签的颜色,就必须将:hover伪类在:link伪类后面声明;
当鼠标点击激活a链接时,同时满足:link、:hover、:active三种状态,要显示a标签激活时的样式(:active),必须将:active声明放到:link和:hover之后。因此得出LVHA这个顺序。
这个顺序能不能变?可以,但也只有:link和:visited可以交换位置,因为一个链接要么访问过要么没访问过,不可能同时满足,也就不存在覆盖的问题。
在组件中的应用
目前的前端开发为了增加开发效率,会对常用组件进行封装,此外,组件还会添加一些必要的结构样式。但是业务的设计文稿中可不一定按照预先写好的默认样式,需要在开发业务时根据组件的DOM结构修改默认样式,此时会出现样式不生效的问题。
例如下面的结构,如果对Title直接增加样式类,则肯定不会生效,因为Title的DOM结构为两层(组件样式定义规定不能使用ID选择器,且类选择器满足最小标记原则)),故样式最多为0,0,2,x。因此,样式多层标记就可提高自定义样式的优先级,例如下方的SCSS写法。
Pageclass="test"Headerclass="test__header"NavbarTitleclass="test__header--title"Toolbar/Title/Navbar/HeaderContent/Content/Page
.test{.test__header{.test__header--title{height:100px;}}}
此外,对于Page组件的样式标记策略推荐使用 金字塔形(树形) ,比如上面的SCSS书写,这样可以保证内部自定义样式不会受到外部干扰,减少不必要的麻烦。
链接: