CSS选择器优先级

CSS选择器优先级的结论是:id选择器优先级 > 类class选择器优先级 > 标签选择器优先级
本文将通过具体实验来证明。

标签选择器

  • 01

    对标签p应用样式,效果图如下:

  • 02

    新建一个网页a.html,复制粘贴下面的代码: <html> <head> <style type="text/css"> p { color:red;} </style> </head> <body > <p id="p1"> 这是一个段落,class="green",id="p1",设置p标签为红色 </p> </body> </html>

  • 03

    说明: 代码中给p标签添加了id和class,但是使用的是标签选择器p设置的样式。

Class类选择器

  • 01

    对类green应用样式,效果图如下:

  • 02

    修改a.html的代码,修改后如下: <html> <head> <style type="text/css"> .green { color:green;} p { color:red;} </style> </head> <body > <p id="p1"> 这是一个段落,class="green",id="p1",设置p标签为红色 </p> </body> </html>

  • 03

    说明:.green { color:green;} 为类green设置字体颜色为绿色。 从代码中可以看到,.green的设置在先,p的设置在后,但是结果仍然显示的为.green的样式,这说明了类选择器的优先级大于标签选择器。 结论:类选择器优先级 > 标签选择器优先级

id选择器

  • 01

    对id为p1的标签应用样式,效果图如下:

  • 02

    修改a.html的代码,修改后如下: <html> <head> <style type="text/css"> #p1 { color:blue;} .green { color:green;} p { color:red;} </style> </head> <body > <p id="p1"> 这是一个段落,class="green",id="p1",设置p标签为红色 </p> </body> </html>

  • 03

    说明:#p1 { color: blue;} 把id为p1的元素字体颜色设置为蓝色。 从代码中可以看到,#p1在最前面,但是结果仍然显示的为#p1的样式,这说明了id选择器具有最高优先权。 结论:id选择器优先级 > 类选择器优先级 > 标签选择器优先级

(0)

相关推荐

  • css选择器怎么使用,css有哪些选择器

    css选择器无疑是css代码中最重要的一环,要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器.HTML页面中的元素就是通过CSS选择器进行控制的. 所以合 ...

  • css选择器有哪些,以及它们们的优先级

    css(层叠式样式表)作为一种表现标准语言,它能使html的表现更加丰富;作为一名web应用开发人员,css的使我们的工作变的更加有趣,同时也让我们增加了许多头疼的事!现在小编着重讲一下css的常见选 ...

  • 怎么用css设置一个图片位置并有边框宽度

    在网页设计中常常会用到图片放到一个想要的位置,并制定宽度高度,使得这样图片增加网页的绚丽多姿,怎么设置额.下面讲讲css使用.通过css选择器使用及宽度高度定位等知识组合. 操作方法 01 先写好ht ...

  • jQuery 选择器,jQuery如何选择div元素

    jQuery 元素选择器和属性选择器允许您通过标签名.属性名或内容对 HTML 元素进行选择. 选择器允许您对 HTML 元素组或单个元素进行操作. 操作方法 01 jQuery 元素选择器 jQue ...

  • 如何使用HTML和CSS制作下拉菜单

    下拉菜单可以在页面上分级显示不同类别的项目.如果用户将鼠标悬停在菜单项上,菜单项下会显示子菜单项目. 我们仅使用HTML和CSS代码就可以制作这样的菜单. 学习这篇指南后,你就能在示例上稍作修改,制作 ...

  • Webstorm常用快捷键备忘(Webstorm入门指南)

    WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaSscript IDE ...

  • Notepad++快捷键&正则表达式替换字符串&插件使用介绍

    Notepad++绝对是windows下进行程序编辑的神器之一,要更快速的使用以媲美VIM,必须灵活掌握它的快捷键,下面对notepad++默认的快捷键做个整理(其中有颜色的为常用招数): 1. 文件 ...

  • 网页字体我做主 傲游3广告过滤另类应用

    把程序做的好用又好玩,是傲游的传统,傲游3的广告过滤也是如此。从“好用”来说,无论是智能的弹窗过滤系统,还是手动的页面广告屏蔽,都无需用户过多干预,简单易用。而这个看起来简单的系统,还拥有着十分强大的 ...

  • 谷歌浏览器怎么调试js

    首先我们打开开发者工具,你可以直接在页面上点击右键,然后选择审查元素或者在Chrome的工具中找到或者你直接记住这个快捷方式: Ctrl+Shift+I (或者Ctrl+Shift+J直接打开控制台) ...