less （五）父级选择 &

最新推荐文章于 2024-01-16 17:38:46 发布

cvper

最新推荐文章于 2024-01-16 17:38:46 发布

阅读量7.6k

点赞数

分类专栏： less 文章标签： less

本文链接：https://blog.youkuaiyun.com/cvper/article/details/80025734

版权

less 专栏收录该内容

8 篇文章

订阅专栏

这个是什么意思呢，我们来看例子：

   <!doctype html> 
 

   < 
  html> 
 

   < 
  head> 
 

   < 
  meta 
  charset= 
  "utf-8"> 
 

   < 
  title></ 
  title> 
 

   < 
  link 
  rel= 
  "stylesheet" 
  href= 
  "sty.css"> 
 

   </ 
  head> 
 

   < 
  body> 
 

   < 
  div> 
 

   < 
  a 
  href= 
  "#">父级选择 
  & </ 
  a> 
 

   </ 
  div> 
 

   </ 
  body> 
 

   </ 
  html> 
 

上面是一个html页面，我们给其添加css 样式如下：

 
  
 
 
 
  div{ 
  width: 
  500 
  px; 
  height: 
  500 
  px; 
  border: 
  1 
  px 
  solid 
  red;} 
 
 
  div 
  a{ 
  color: 
  orange;} 
 
 
  div 
    
  a 
  :hover 
  { 
  color 
  : 
  red 
  ;} 
 
 
  
 
 

上面的超链接部分颜色是橘黄色，并且添加了hover改变样式；

我们同样的样式使用 less:

 
  div{ 
 
  width: 
  500 
  px; 
 
  height: 
  500 
  px; 
 
  border: 
  1 
  px 
  solid 
  red; 
 
  a{ 
 
  color: 
  orange; 
 
  &:hover{ 
 
  color: 
  red; 
 
   } 
 
   } 
 
   }