CSS是可以用来添加样式的
有内部样式(内部样式就是在html文件中通过<style></style>标签来添加样式)和
外联样式(通过<link>标签将外部的样式css文件引入到html文件中)
还有行间样式,即在元素标签中通过style=" "添加样式;
而在各个不同的样式添加中,优先级就决定了最后真正能呈现在页面的效果;
而添加样式是通过CSS选择器选择指定的标签进行添加的,而选择器也不是唯一的:
1、id选择器(唯一的 与标签只能是一对一)
2、class选择器(与标签可以一对多或者多对一)
3、标签选择器(标签名称)
4、通配符选择器(“*”一般用来初始化所有标签)
此时优先级是:行间样式 > id选择器 > class选择器||属性选择器 > 标签选择器 > 通配符选择器
补充:当绝对需要确定一个元素具有特定的属性CSS时,可以在样式后添加------------!important;
例如
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>权重问题</title>
<style type="text/css">
.blue{
color: blue;
}
</style>
</head>
<body>
<p style="color: red" class="blue">行间红色,class选择器是蓝色</p>
</body>
</html>
因为行间样式的优先级更高,所以字应该是红色
但是如果在class选择器的颜色设置后面添加!important;
color:blue !important;
文字变成了蓝色
所以优先级的顺序应该是:
!important > 行间样式 > id选择器 > class选择器||属性选择器 > 标签选择器 > 通配符选择器
对应有个权重的问题,反正最后有个结果如下
权重值
!important Infinity
行间样式 1000
id选择器 100
class | 属性 | 伪类 10
标签 | 伪元素 1
通配符 0
**注意**:只要是写在同一排的选择器,将其权重相加,即可求出谁的优先级更高;
总结:
以前在引用别人的网页的时候,想要修改一下样式,但是不管怎么添加样式都得不到想要的效果,现在明白了;
因为对于同一个标签,可以有多种方式来选中,所以可能有的时候就是权重的问题,导致代码难以修改;