css三大特性 & 选择器的权重
2024-09-05 19:35:32
层叠性
层叠性是指当一个标签被设置了多个重复的样式的时候会发生冲突,一个属性会覆盖另外一个属性。
覆盖性原则:
层叠性主要遵循的原则是就近原则,在不考虑优先级的情况下,在多个样式中最终生效的样式是离标签最近的样式
这里要注意只覆盖同样的不可重复的样式属性,不会覆盖允许重复的属性
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
div{
background-color: red;
}
div{
background-color: blue;
}
</style>
</head>
<body>
<div>123</div> <!-- 最终背景颜色是蓝色 -->
<div style="background-color: green;">123</div> <!-- 最终背景颜色是绿色 -->
</body>
</html>
继承性
继承性是指当子标签没有设置样式时,会继承父标签的样式
子元素可以继承父元素的样式包括:text-
文本属性、font-
字体属性、line-
行高以背景类属性,要注意子标签不会继承父标签的宽度、高度、边距属性
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
div{
font-size:70px;
background-color: #CCC;
color:skyblue;
}
</style>
</head>
<body>
<div>
<p>p继承div的样式</p>
</div>
</body>
</html>
优先级
当一个元素制定了多个选择器时就会有选择器的优先级
- 选择器相同,则执行层叠性
- 选择器不同,优先级为,注意优先级逐级变大
- 继承的权重为(0,0,0,0)
- 标签选择器的权重为(0,0,0,1)
- 类、伪类选择器的权重为(0,0,1,0)
- id选择器选择器的权重为(0,1,0,0)
- 行内样式的权重为(1,0,0,0)
!important
的权重无限大,例border: 1px solid #333 !impportant
权重的叠加
如果是复合选择器,则会有权重叠加,需要计算权重
div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -------> 0,0,1,1
.nav a ---------> 0,0,1,1
权重只会叠加,不会进位
示例
例1
<style>
.nav li {
color: red;
}
li {
color: pink;
}
</style>
<body>
<ul class="nav">
<li>选择器的权重</li>
</ul>
</body>
文字最后展示为红色,.nav li
权重为(0,0,1,1),而li
标签选择器的权重最低为(0,0,0,1)
如果给标签增加类选择器呢
<style>
.nav li {
color: red;
}
li {
color: pink;
}
.pink {
color: pink;
}
</style>
<ul class="nav">
<li class="pink">选择器的权重</li>
</ul>
结果还是红色,因为类选择器权重为(0,0,1,0),如果要使文字变成粉色,则
.nav .pink {
color: pink;
}
最新文章
- 福利到!Rafy(原OEA)领域实体框架 2.22.2067 发布!
- [field:picname/]和[field:litpic/]区别
- 如何在Visual Studio 2012中发布Web应用程序时自动混淆Javascript
- CSS 的定位方式和含义
- Python基础、异常处理
- GOLANG 基本数据类型 浮点型
- php-redis扩展安装
- Android 断点续传 思路
- net-snmp源码VS2013编译添加加密支持(OpenSSL)
- DB String Split sample
- ubuntu 14.04 https 形式安装docker 私有库 harbor
- 基于Fragment实现Tab的切换,滑出侧边栏
- NSFileManager 沙盒文件管理
- CI的扩展机制
- 解决java.lang.IllegalStateException: BeanFactory not initialized or already closed - call &#39;refresh&#39; before accessing beans via the ApplicationContext这个问题
- 20175214 《Java程序设计》第8周学习总结
- pycharm远程调试服务器
- AngularJS学习之旅—AngularJS Scope作用域(五)
- R-FCN:安装训练自己的数据
- C# 多线程task