10 个鲜为人知的 CSS 技巧（css使用教程）-前端教程-前军教程网

今天这篇文章主要分享 10 个鲜为人知的 CSS 技巧，这些技巧将成为你提高网页设计技能的秘密武器。

现在，我们就一起来看看这些CSS 技巧。

01. 网站平滑滚动

在<html>元素中添加scroll-behavior: smooth，以实现整个页面的平滑滚动。

html{
    scroll-behavior: smooth;
  }

02.链接的属性选择器

此选择器的目标是具有以“https”开头的 href 属性的链接。

a[href^="https"]{
    color: blue;
  }

03.?合并兄弟姐妹

选择 <h2> 后面的所有兄弟元素 <p> 元素。

h2 ~ p{
    color: blue;
  }

04. :not() 伪类

该选择器将样式应用于不具有“特殊”类的列表项。

li:not(.special){
        font-stlye: italic;
    }

05. 用于响应式排版的视口单位

使用视口单位（vw、vh、vmin、vmax）可以使字体大小响应视口大小。

h1{
    font-size: 5vw;
  }

06. :empty 表示空元素

此选择器定位空的 <p> 元素并隐藏它们。

p:empty{
    display: none;
  }

07.自定义属性（变量）

您可以更轻松地定义和使用自定义属性

主题和维护。

:root{
    --main-color: #3498db;
  }


  h1{
    color: var(--main-color);
  }

08.图像控制的Object-fit属性

object-fit 控制如何调整替换元素（如 <img>）的内容大小。

img{
    width: 100px; 
    height: 100px;
    object-fit: cover;
  }

09. 简化布局的网格

CSS 网格提供了一种以更简单的方式创建布局的强大方法。

.container{
    display: grid;
    grid-tempalte-columns: 1fr 2fr 1fr;
 }

10. :focus-in 伪类

如果该元素包含任何具有 :focus 的子元素，则 :focus-within 会选择该元素。

form:focus-within{
    box-shadow: 0 0 5px rgba(0, 0, 0, 0, 0.2);
 }

总结

以上就是我想与你分享的10个CSS技巧，希望对你有所帮助，如果你觉得有用的话，请记得点赞我关注我。

前军教程网