搜索
首页web前端css教程CSS的优先级和继承问题

CSS的优先级和继承问题

★CSS的冲突,即优先级
 CSS本身的设置可以同时应用多个样式在同一个元素,此时样式之间可能出现冲突而达不到用户所想要的效果。
★解决CSS冲突的优先级规则:
 ● CSS层叠样式表引入方法的优先级:内联式>内嵌式>链接式>导入式
 ● 在多个外部样式中,后出现的样式的优先级高于先出现的样式,也就是俗称的覆盖
 ● 在样式中,选择器的优先级:ID样式>class样式>标记样式(以权重比喻:id的权重为100,class的权重为10,标签名的权重为1)
 ● 在样式后面加一个!important,例如这样:.abc {background:#fff !improtant;} 这个样式的优先级就会默认提升到顶级,全局样式就无法影响到它了。
✪注意:!important要写在分号的前面
优先级:
     就近原则(离代码越近,优先级越高)
     选择范围越小,优先级越高。细化CSS,通过多加父元素的选择符一层层包住,缩小选择范围

 ★样式继承:
 继承是指我们设置上级(父级)的CSS样式,上级(父级)及以下的子级(下级)都具有此属性。一般只有文字文本具有继承特性,如文字大小、文字加粗、文字颜色、字体等。但注意有一些css样式是不具有继承性的。如border:1px solid red;

demo:

<p style="color:red;">如果你不知道自己<span>想做什么该做什么</span>,那你什么都做不好。</p>

说明:(1)我设置上级(父级:p)的文字颜色为红色,而子级(span)未设置文字颜色,但是文字具有继承特性,所以子级文字内容依然是红色。
 (2)假如设置父级文字颜色样式后,其多个子级因继承而与父级相同,若有些子级颜色不想与父级相同,这个时候只需对对应子级设置需要颜色即可。
✪注意:还有一个权值比较特殊--继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低。

继承好处:可以只设置上级的CSS样式表属性,子级(下级)不用设置,都有此CSS属性,可以减少CSS代码,便于维护。

 ★CSS中可以和不可以继承的属性
一、无继承性的属性

1、display:规定元素应该生成的框的类型

2、文本属性:

vertical-align:垂直文本对齐

text-decoration:规定添加到文本的装饰

text-shadow:文本阴影效果

white-space:空白符的处理

unicode-bidi:设置文本的方向

3、盒子模型的属性: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

4、背景属性:background、background-color、background-image、background-repeat、background-position、background-attachment

5、定位属性:float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

6、生成内容属性:content、counter-reset、counter-increment

7、轮廓样式属性:outline-style、outline-width、outline-color、outline

8、页面样式属性:size、page-break-before、page-break-after

9、声音样式属性:pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

二、有继承性的属性

1、字体系列属性

font:组合字体

font-family:规定元素的字体系列

font-weight:设置字体的粗细

font-size:设置字体的尺寸

font-style:定义字体的风格

font-variant:设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。

font-stretch:对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。

font-size-adjust:为某个元素规定一个 aspect 值,这样就可以保持首选字体的 x-height。

2、文本系列属性

text-indent:文本缩进

text-align:文本水平对齐

line-height:行高

word-spacing:增加或减少单词间的空白(即字间隔)

letter-spacing:增加或减少字符间的空白(字符间距)

text-transform:控制文本大小写

direction:规定文本的书写方向

color:文本颜色

3、元素可见性:visibility

4、表格布局属性:caption-side、border-collapse、border-spacing、empty-cells、table-layout

5、列表布局属性:list-style-type、list-style-image、list-style-position、list-style

6、生成内容属性:quotes

7、光标属性:cursor

8、页面样式属性:page、page-break-inside、windows、orphans

9、声音样式属性:speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

三、所有元素可以继承的属性

1、元素可见性:visibility

2、光标属性:cursor

四、内联元素可以继承的属性

1、字体系列属性

2、除text-indent、text-align之外的文本系列属性

五、块级元素可以继承的属性

1、text-indent、text-align

更多CSS的优先级和继承问题 相关文章请关注PHP中文网!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
迭代使用样式组件的React设计迭代使用样式组件的React设计Apr 21, 2025 am 11:29 AM

在一个完美的世界中,我们的项目将拥有无限的资源和时间。我们的团队将开始使用经过深思熟虑的UX设计进行编码。

哦,制作三角形面包丝带的许多方法!哦,制作三角形面包丝带的许多方法!Apr 21, 2025 am 11:26 AM

哦,制作三角形面包屑丝带的许多方法

CSS指南中的SVG属性CSS指南中的SVG属性Apr 21, 2025 am 11:21 AM

SVG具有自己的一套元素,属性和属性集,以至于内联SVG代码可能会变得漫长而复杂。通过利用CSS和SVG 2规范的一些即将到来的功能,我们可以减少该代码以进行清洁标记。

交叉观察者的一些功能用途可以知道何时在元素中查看交叉观察者的一些功能用途可以知道何时在元素中查看Apr 21, 2025 am 11:19 AM

您可能不知道这一点,但是JavaScript最近偷偷地积累了许多观察者,而交叉观察者是其中的一部分

恢复偏爱减少运动恢复偏爱减少运动Apr 21, 2025 am 11:18 AM

我们可能不需要扔掉所有CSS动画。请记住,这更喜欢减少动作,而不喜欢不运动。

如何将进步的Web应用程序进入Google Play商店如何将进步的Web应用程序进入Google Play商店Apr 21, 2025 am 11:10 AM

PWA(Progressive Web应用程序)已经与我们在一起了一段时间。但是,每次我尝试向客户解释它时,同样的问题都会出现:“我的用户会成为

处理HTML的最简单方法包括处理HTML的最简单方法包括Apr 21, 2025 am 11:09 AM

这对我来说非常令人惊讶,HTML从未在其中包含其他HTML文件。似乎也没有任何东西

更改悬停在悬停的SVG的颜色更改悬停在悬停的SVG的颜色Apr 21, 2025 am 11:04 AM

使用SVG有很多不同的方法。取决于哪种方式,在不同状态或条件下重新定制该SVG的策略 - 悬停,

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具