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
**注意**:只要是寫在同一排的選擇器,將其權重相加,即可求出誰的優先級更高;
總結:
以前在引用別人的網頁的時候,想要修改一下樣式,但是不管怎麼添加樣式都得不到想要的效果,現在明白了;
因爲對於同一個標籤,可以有多種方式來選中,所以可能有的時候就是權重的問題,導致代碼難以修改;