如何判断CSS中不同类型的选择器的优先级和权重

 时间:2026-02-15 12:34:32

1、第一,打开HBuilderX开发工具,新建HTML5页面文件,然后插入两个div标签,并在内层div设置背景色

如何判断CSS中不同类型的选择器的优先级和权重

2、第二,添加一个style标签,利用类选择器和标签选择器构成层次选择器,设置内层div标签背景色(与标签style设置背景色不一样)

如何判断CSS中不同类型的选择器的优先级和权重

3、第三,保存代码并打开浏览器,查看界面背景色,结果发现是蓝色,正好是标签上绑定样式,说明内联样式比类选择器(内部样式)优先级要高

如何判断CSS中不同类型的选择器的优先级和权重

4、第四,返回HBuilderX编辑器,在类选择设置背景色后,加上!important

如何判断CSS中不同类型的选择器的优先级和权重

5、第五,保存代码并刷新浏览器,结果发现界面背景色发生了改变,说明!important优先级比内联式要高

如何判断CSS中不同类型的选择器的优先级和权重

6、第六,利用外层div标签的ID选择器和类选择器,分别设置内层div标签的背景色;然后保存代码并刷新浏览器,结果发现显示的是ID选择器设置的背景色,说明ID选择器的优先级比类选择器的要高

如何判断CSS中不同类型的选择器的优先级和权重

  • Eclipse怎么设置自动导包
  • 如何在AndroidStudio上新建新项目?
  • idea 显示类中的方法名
  • VS如何设置引用路径
  • labview中初始化矩阵的一种用法
  • 热门搜索
    汉口学院怎么样 烦恼的近义词 动漫英语怎么说 海昏侯博物馆门票预约 移动怎么查积分 狗得了细小怎么办 十全十美的近义词 风寒感冒吃什么药好 南昌航空大学怎么样 刘海怎么扎上去好看