css: css-nesting

厂商前缀（vendor prefix)  如： -o-border-image。截止2016年年末，厂商前缀：

-epub-  国际数字出版论坛制定的ePub格式

-moz-   基于Mozilla 的浏览器如Firefox

-ms-  微软Internet Explorer

-o-     基于Opera 的浏览器

-webkit-    基于WebKit 的浏览器 如Safari和Chrome)

 

 

 

https://www.cnblogs.com/coco1s/p/17692866.html
https://github.com/chokcoco/iCSS
https://caniuse.com/css-nesting
https://www.sitepoint.com/an-introduction-to-native-css-nesting/
https://www.w3.org/TR/css-nesting-1/
https://css-tricks.com/css-nesting-specificity-and-you/
https://drafts.csswg.org/


CSS: The Definitive Guide, 5th Edition
by Eric Meyer, Estelle Weyl
https://meyerweb.github.io/csstdg5figs/
https://github.com/meyerweb/csstdg5figs
CSS: The Definitive Guide, 4th Edition
https://github.com/meyerweb/csstdg4figs

 

 

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">	
<title>Native CSS Nesting Rules</title>
	<meta name="Description" content="geovindu,涂聚文，Geovin Du"/>
<meta name="Keywords" content="geovindu,涂聚文，Geovin Du"/>
<meta name="author" content="geovindu,涂聚文，Geovin Du"/>	
<style type="text/css">
	
div.geovindu {
		color: #946cac;
		background-color: #FFFFFFF;
		border: solid 0.1em #946cac; /*groove*/
		border-radius: 1.0rem;
		display:inline-block;
	
    & > p {
        color:blueviolet;
    }

    &:hover {
        color: yellow;
    }
}	
	
	
div.g-container {
    border: 1px solid #AD3A89;
    
    & h3 {
        color:red;
        
        & span {
            color: blue;
        }
    }
	
	  &:hover {
    color:aqua;
    }

}
	
div.g-container {
  /* ... */
	
  &:hover {
    color:aqua;
  }

	& h3{
		color:black;
		  &:hover {
          color:aqua;
         }
	}
  &:is(.content, footer) {
    padding: 16px;
  }

  &::before {
    content: "geovindu";
    /* ... */
  }
}	
	
div.media {
  @media (min-width: 600px) {
	  
	   border:2px solid #fffccc;
	  
      & h3 {
          color:darkgreen;
      }
	  
	   &:hover {
        color: yellow;
       }
  }
}	
</style>
</head>

<body>
	
<div class="geovindu">
    <h3>塗聚文CSS Nesting without @media</h3>
</div>	
	
<div class="g-container">
    <h3>CSS Nesting without @media</h3>
</div>
<div class="g-container media">
    <h3>CSS Nesting with @media</h3>
</div>	
</body>
</html>

　　

posted @ 2023-09-13 08:56  ®Geovin Du Dream Park™  阅读(19)  评论(0)    收藏  举报