jquery执行优先级 div优先级

转载

冷月星 2023-05-31 15:52:41

文章标签 jquery执行优先级 css 优先级选择器 文章分类 jQuery 前端开发

一、ID选择器>>类选择器>>自有选择器

如：

<div id="idCyan">
     <h2 class="classRed" id="idBlue">//定义#idBlue:blue .classRed:red h2:grey
         blablabla2
     </h2>
 </div>

那么，会显示的是最近的id定义的blue，否则显示最近的class定义的red，否则往上（这里div）找，找到cyan并显示，否则如果上层上上层等找不到定义，就按最近的h2颜色grey显示。

/@import的css等，只要找到id就显示id的颜色，与样式载入的方式和位置无关。

二、行内样式 >> head定义的样式（style和link谁写在前面就被覆盖了） >> @import

如：

<head>
 <link href="priority.css" rel="stylesheet" type="text/css" />/*css文件中定义黄色*/
 <style type="text/css">
     ul {
         color:magenta;/*洋红*/
     }
     @import importTest.css;/*这个css文件中定义红色*/
 </style>
 </head>  
 <body>
     <div>
           <h3 style="color:orange">blablabla</h3>
     </div>
 </body>

那么，这里的blablabla，显示的是橙色。

如果把橙色那句删掉，会显示ul中的洋红。

如果把head中style和link的位置换一下，会显示link中定义的黄色。

最后，如果把style和link的颜色删了，才会选择@import中的红色。

三、同种选择器范围越小优先级越高。

<div id="one"> <h3 id="bla3">blablabla3</h2></div>

css可以定义

#one:green

h3:red

#bla3:purple

h3#bla3:blue

#one #bla3:orange