💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、星火、月之暗面及文生图 广告
[TOC] ## attr() 获得元素属性 demo ``` <style> a:after {content: " (" attr(href) ")";} </style> <p><a href="http://www.runoob.com">菜鸟教程</a></p> <p><a href="http://www.runoob.com/html/">HTML 教程</a></p> ``` 效果 ![](https://img.kancloud.cn/1f/a8/1fa82ad62e638a5720e5e0046769b707_366x76.png) ## calc 函数 ``` <style> .banner { position: absolute; left: 40px; width: calc(100% - 80px); // 计算长度 border: solid black 1px; box-shadow: 1px 2px; background-color: yellow; padding: 6px; text-align: center; box-sizing: border-box; } </style> <div class="banner">This is a banner!</div> ``` ![](https://img.kancloud.cn/65/4a/654a9e1f8ceff07bd5f7c2fc378986a1_820x116.png) ## counter() 计数器 ``` <style> body { counter-reset: section; /* 重置计数器成0 */ } h3:before { counter-increment: section; /* 增加计数器值 */ content: "Section " counter(section) ": "; /* 显示计数器 */ } </style> <h3>GOOGLE</h3> <h3>RUNOOB</h3> <h3>TAOBAO</h3> ``` 效果 ![](https://img.kancloud.cn/30/23/302319bcd07c3f56eb8b74bb54960025_233x134.png) ## min()/max() ``` #div1 { background-color: yellow; height: 100px; width: max(50%, 300px); } ```