css样式优先级问题

官方表述的CSS样式优先级如下：

通用选择器（*） < 元素(类型)选择器 < 类选择器 < 属性选择器 < 伪类 < ID 选择器 < 内联样式

 CSS 伪类用于向某些选择器添加特殊的效果

属性选择器可以根据元素的属性及属性值来选择元素。

---

 

那么，我们来举个例子：

html代码：

<div class="img-div">
    <img src="images/icon.png" class="img" id="img" alt="img" style="width:50px" />
</div>

引入一个style.css样式：

<link type="text/css" rel="stylesheet" href="css/style.css" />

在style.css样式中写入

*{width:100px}通用选择器（*）

.img{width:400px;}类class选择器

img[alt="img"] {width:300px}伪类选择器

img:hover{width:350px}属性选择器

img{width:450px}元素(类型)选择器

#img{width:250px;}id选择器

打开html可以发现