css summaty 3-样式表的重叠

最新推荐文章于 2023-08-17 10:57:36 发布

Asteroid 325

最新推荐文章于 2023-08-17 10:57:36 发布

阅读量124

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43846020/article/details/102758808

版权

前端专栏收录该内容

48 篇文章 0 订阅

订阅专栏

样式表的重叠

1.加边框->留下右边框，拉长边框
在这里插入图片描述

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
   #navigation{text-align: center;}
  .item{
    text-align:center;
    color:black;
    border-right:solid 1px #32CD32;
     padding:0 15px;
   }
   
  </style>
 </head>
 <body>
  <div id="navigation">
   <a href="#" class="item">首页</a>
   <a href="#" class="item">餐厅</a>
   <a href="#" class="item">及</a>
   <a href="#" class="item">他</a>
   <a href="#" class="item" style="border: none;">i lic </a>
 
  </div>
 </body>
</html>

或者

   <a href="#" class="item" style="border: none;">i lic </a>不这么写
     这么写
    #navigation .item .last{border:nonr;}在style内
    
     <class="item last"> 代替上句
   

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
   #navigation{text-align: center;}
  .item{
    text-align:center;
    color:black;
    border-right:solid 1px #32CD32;
     padding:0 15px;
     
    
   }
  #navigation .item.last{
   border: none;
  } 
   
  </style>
 </head>
 <body>
  <div id="navigation">
   <a href="#" class="item">首页</a>
   <a href="#" class="item">餐厅</a>
   <a href="#" class="item">及</a>
   <a href="#" class="item">他</a>
   <a href="#" class="item last">i lic </a>
 
  </div>
 </body>
</html>

在实际开发过程中，作用于同一个元素上的多个样式产生冲突的情况下不可避免的经常发生
当多个样式发生重叠时，优先级别高的样式会生效–》层叠样式法

选择器的权重

!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>优先级</title>
  <style>
   a{color:yellow;}
   div a{color:green;}
   .demo a{color: black;}
   #demo1 a{color:orange;}
   div #demo1 a{color:red;}
   
  </style>
 </head>
 <body>
  <a href="">应该是黄色</a>       <!-- first -->
  
  <div class="demo">
   <a href="">应该是黑色</a>     <!--前三个-->   
  </div>
  
  <div id="demo1">
   <a href="">应该是红色</a>    <!--1,2,4,5-->
  </div>
 </body>
</html>

Asteroid 325

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css summaty 3-样式表的重叠

样式表的重叠1.加边框->留下右边框，拉长边框<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> #navigation{text-align: center;} .item{...
复制链接

扫一扫

专栏目录