css经典用法

选择器

伪类选择器

:empty 代表没有子元素的元素

可以用来隐藏无用的空元素

/* 隐藏页面中所有的空元素 */
*:empty {
    display: none;
}
 
/* 隐藏页面中所有的空段落 */
p:empty {
    display: none;
}

/* 选择表格中空的单元格，并为它们设置背景颜色 */
td:empty {
    background-color: #eee;
}

:has 可以根据直接后代元素的存在来匹配元素

/* 选择直接包含 p 元素的 div */
div:has(> p) {
  border: 1px solid black;
}

::before 选择器在被选元素的内容前面插入内容

请使用 content 属性来指定要插入的内容。

<p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p>
<p><b>注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。</p>

p::before {
    content:"台词：";
    background-color:yellow;
    color:red;
    font-weight:bold;
}

::after 选择器在被选元素的内容后面插入内容

请使用 content 属性来指定要插入的内容。

<p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p>
<p><b>注释：</b>对于在 IE8 中工作的 :after，必须声明 DOCTYPE。</p>

p::after {
    content:"- 台词";
    background-color:yellow;
    color:red;
    font-weight:bold;
}

自动换行

我们可以通过 CSS 中的 white-space 和 word-break 属性来控制文本换行的效果

p {
   white-space: normal;
   overflow-wrap: break-word;
}

旋转 rotate( )

<div class="wrapper">
    <div></div>
</div>

.wrapper {
    width: 200px;
    height: 200px;
    border: 1px dotted red;
    margin: 100px auto;
}
.wrapper div {
    width: 200px;
    height: 200px;
    background: orange;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

设置滚动条样式

从Chrome 85开始，你可以使用 scrollbar-width 和 scrollbar-color 属性来控制滚动条的样式。这些属性是标准的CSS属性，但不是所有浏览器都支持。

不显示滚动条

div {
    overflow: auto;
    scrollbar-width: none; // 设置滚动条宽度('auto', 'thin', 'none');
}

设置滚动条

div {
    overflow: auto;
    scrollbar-color: rgba(183, 185, 193, .6) #fff0; // 设置滚动条颜色(scrollbar-color: #888 #f1f1f1;);
}

使用 ::-webkit-scrollbar和相关伪元素

这是最常用的方法，适用于基于WebKit的浏览器（如Chrome和Safari）。

/* 整个滚动条 */
::-webkit-scrollbar {
    width: 12px; /* 滚动条的宽度 */
    height: 12px; /* 滚动条的高度 */
}

/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
    background-color: #888; /* 滑块的背景颜色 */
    border-radius: 10px; /* 滑块的圆角 */
    border: 2px solid #fff; /* 滑块的边框 */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background: #f1f1f1; /* 轨道的背景颜色 */
}

扭曲 skew( )

<div class="wrapper">
    <div>我变成平形四边形</div>
</div>

.wrapper {
    width: 300px;
    height: 100px;
    border: 2px dotted red;
    margin: 30px auto;
}
.wrapper div {
    width: 300px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    color: #fff;
    background: orange;
    -webkit-transform: skew(45deg);
    -moz-transform:skew(45deg) 
    transform:skew(45deg);
}

缩放 scale( )

<div class="wrapper">
    <div>我将放大1.5倍</div>
</div>

.wrapper {
    width: 200px;
    height: 200px;
    border:2px dashed red;
    margin: 100px auto;
}
.wrapper div {
    width: 200px;
    height: 200px;
    line-height: 200px;
    background: orange;
    text-align: center;
    color: #fff;
}
.wrapper div:hover {
    opacity: .5;
    -webkit-transform: scale(1.5);
    -moz-transform:scale(1.5)
    transform: scale(1.5);
}