<div>
我是div
</div>
![](https://img-blog.csdnimg.cn/d77a77bfa27e42d0883161a69175aaed.png)
**注意:**
并不是所有的样式都能被继承,只有文本与字体样式才能继承,其他的样式属性不能被继承。在实际工作中,我们往往会给 body 标签设置字体大小与字体颜色。因为 body 标签是最外层的元素,内层的元素会继承外层的元素的样式。
优先级
---
行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通配符选择器
一般而言,选择器指定的越准确,优先级就越高。
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{ /* 通配符选择器 */
color: red;
}
div{ /* 标签选择器 */
color: green;
}
.div{ /* 类选择器 */
color: blue;
}
#div{ /* ID选择器 */
color: yellow;
}
</style>
<div class="div" id="div" style="color: black;">
我是div
</div>
![](https://img-blog.csdnimg.cn/090a5fbd13b3414bb96cbd89b31b2a73.png)
!important 属性
-------------
!important在CSS中的作用:
important在英文中是 “重要的” 意思,!important 主要是用来提升属性的权重,其属性值的权重无穷大。其语法格式为:属性:值 !important
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
color: green !important;
}
.div{
color: blue;
}
</style>
<div class="div">
我是div
</div>
正常通过优先级,div 应该继承类选择器的属性,当我们给标签选择器属性后面加入!important时,将强制应用该样式。
![](https://img-blog.csdnimg.cn/070f1bb9b5d54ddea216b0ae17788961.png)
**注意**:!important它只提升了属性的权重并没有提升选择器的优先级。
多类名书写
------
类名:指的是class属性值,一个标签可以携带多个类名,指的是class的属性值可以有多个,每一个属性值之间使用空格分隔。例如:<标签名 class=“值1 值2 值3”></标签名>
多个类名的优点:1、减少CSS代码量 2、多个类名的样式会叠加到当前元素上面
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1{
font-weight: bold;
}
.div2{
color: red;
}
.div3{
font-weight: bold;
color: red;
}
</style>
<div class="div1">我是div1</div>
<div class="div2">我是div2</div>
<div class="div3">我是div3</div>
<div class="div1 div2">我是div3二号</div>
![](https://img-blog.csdnimg.cn/b23da05352c64adc9d9b39944f606614.png)
注意:当我们设置多个类名时出现样式冲突,以CSS代码下面的为准,下面将覆盖上面样式。
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1{
color: black;
}
.div{
color: red;
}
</style>
<div class="div div1">我是div</div>
![](https://img-blog.csdnimg.cn/eeed40f5599143408f93a2290f4f0435.png)
> 🍃前端的学习还是要以多练习为主,想要练习HTML的朋友,推荐可以去牛客网看一看,链接:[牛客网]( ) 里面的IT题库内容很丰富,属于国内做的很好的了,最重要的是里面的资源是免费的,是课程+刷题+面经+求职+讨论区分享,一站式求职学习网站,感兴趣的可以去看看。
![](https://img-blog.csdnimg.cn/715028c8707a40dfa7dd38d0bf9a8b6f.png)
和 (二) 同时写的文章,讲真同时写两篇博文脑细胞有点痛苦,更别说身体的酸痛了,码文不易,大家支持一下吧。