CSS中的优先级

最新推荐文章于 2024-06-16 17:29:19 发布

weixin_44117331

最新推荐文章于 2024-06-16 17:29:19 发布

阅读量528

点赞数

本文链接：https://blog.csdn.net/weixin_44117331/article/details/89217581

版权

1、样式优先级

行内样式>内部样式>外部样式(后两者是就近原则)
例如：
1.行内样式和内部样式比较优先级：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'test00.jsp' starting page</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
   <meta http-equiv="description" content="This is my page">
   <!--
   <link rel="stylesheet" type="text/css" href="styles.css">
   -->
   <style type="text/css">
   p{color:green}
   </style>
  </head>
     
  <body>
   <p style="color:red">p段落，了解一下</p>
  </body>
</html>

结果如下：

在这里插入图片描述
结论：行内样式优先级高于内部样式表。

内部样式表和外部样式表比较优先级：
a、内部样式表在外部样式表上面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'test00.jsp' starting page</title>
    
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">    
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 <!--内部样式表  -->
 <style type="text/css">
  p{color:green}
 </style>
 <!--外部样式表  -->
 <link rel="stylesheet" type="text/css" href="style/css/test00.css">
 
  </head>
     
  <body>
   <p>p段落，了解一下</p>
  
     <div>我是div</div>
     <ol>
         <li>1111</li>
         <li>2222</li>
     </ol>
  </body>
</html>

运行结果

在这里插入图片描述
b.外部样式表在内部样式表上面（不上代码和图了）。

结论：就近原则，谁是最近（即谁在下）显示谁的效果。

2、选择器优先级

优先级：ID选择器>类选择器>标签选择器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'test00.jsp' starting page</title>
    
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">    
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 <style type="text/css">
     #a{
       color: green;
     }
     .b{
       color: yellow;
     }
     h2{
       color: red;
    }
   </style>
 
  </head>
     
  <body>
    <h2>111</h2> <!--红色-->
     <h2 id="a" class="b">222</h2> <!--绿色-->
     <h2 class="b">333</h2><!--黄色-->
  </body>
</html>

显示结果：
在这里插入图片描述

weixin_44117331

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS中的优先级

1、样式优先级行内样式>内部样式>外部样式(后两者是就近原则)例如：1.行内样式和内部样式比较优先级：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"&g...
复制链接

扫一扫