CSS三大特性及其选择器

yanyihan16

已于 2022-03-18 11:05:13 修改

阅读量635

点赞数

分类专栏： CSS 文章标签： css css3 前端

于 2019-05-23 13:41:21 首次发布

本文链接：https://blog.csdn.net/yanyihan16/article/details/90478966

版权

一、CSS三大特性
- 1.继承性
- 2.层叠性
- 3.优先级
  - 权重
  - !important注意点
  - 例子
二、CSS选择器
- 项目
  - 项目

一、CSS三大特性

1.继承性

子标签可以继承父类的标签的样式
color,text-开头，line-开头，font-开头的可以继承，关于文字样式的可以继承，但并不是所有的属性都可以继承的，比如所有关于盒子的，定位的，布局的属性不可以继承
a标签是不可以继承父类的color和font的
h 标题标签不能继承父类设置文字大小

2.层叠性

层叠性是指多种CSS样式的叠加。例如，当使用内嵌式CSS样式表定义p标签标记字号大小为12像素，链入式定义p标签标记颜色为红色，那么段落文本将显示为12像素红色，即这两种样式产生了叠加。

<html>
	<head>
		<style type="text/css">//内嵌式CSS样式表
			p{ font-size:14px; }
		</style>
		<link href="css文件路径" type="test/css" rel="stylesheet" />//链入式
	</head>
	<body>
		<p></p>
	</body>
</html>

层叠性是css解决冲突的能力
叠性能力大小要根据权重的高低来决定

3.优先级

权重叠加计算优先级

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：

继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。
权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
所有都相同时，声明靠后的优先级大。
CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

权重

权重计算规则：

	内联样式	ID选择器	类，伪类和属性选择器	标签选择器和伪元素选择器

最低0.47元/天解锁文章

yanyihan16

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS三大特性及其选择器

目录一、CSS三大特性1.继承性2.层叠性3.优先级权重!important注意点例子二、CSS选择器项目项目一、CSS三大特性1.继承性子标签可以继承父类的标签的样式color,text-开头，line-开头，font-开头的可以继承，关于文字样式的可以继承，但并不是所有的属性都可以继承的，比如所有关于盒子的，定位的，布局的属性不可以继...
复制链接

扫一扫

专栏目录