选择器本没有什么优先级可言! 只不过叫着叫着就有了而已——关于韩顺平老师将div+css部分选择器的优先级

来源：互联网发布：李开元知乎编辑：程序博客网时间：2024/05/17 03:26

关于四个选择器的优先级，韩老师是这样讲的：

四个选择器的优先级如下：

但是我不赞同这样的说法。按找老师讲的：通配符选择器改变所有数据的显示样式，而html选择器只改变局部数据的显示样式，举例如下:

div文件

<html><head><link rel = "stylesheet" type = "text/css" href = "new1.css"></head><body><div>hello world<p>世界你好</p></div></body></html>

css文件：

/*通配符选择器*/*{color: red;/*改变所有数据的显示样式*/}/* html选择器 */p{color: green;/*只改变<p>标签内元素的显示样式*/}

最终中edge 中的显示结果如下：

的确如此。

但是我想到 C语言中运算符的优先级，先来举个例子：计算 2 + 3*4; 其运算顺序不言而喻。

文字表达即：优先级高(*)的先执行，优先级低(+)的后执行。

而在html中，先执行了通配符选择器相关代码，后执行了 html选择器相关代码。所以通配符选择器优先级更高，html选择器优先级过更低。这个结果和韩老师的结果正好相反。

因此我的结果是：

id 选择器<class选择器<html选择器<通配符选择器

但真的是这样么？

这样的结果只不过是程序按照代码的位置顺序来改变了最终的显示样式而已；那么，上面的例子用自然语言描述可为：

edge浏览器打开一个html文件-->检查到有 “ hello world 世界你好” 的可显示字符-->发先这所有的字符都被改为红色，数据全部显示未红色-->发现<p></p>中数据被改为绿色，显示<p></p> 中数据为绿色。

综上：选择器本没有什么优先级可言! 只不过叫着叫着就有了而已。具体显示属性就只不过是就近原则而已！

这是我第一次写博客，刚学了一些 html，发表一些我自己的理解。

上述内容中有些专业词可能有错误的，内容有错误的，还请广大网友不吝指正！

1 0