前言
CSS 是前端开发不可或缺的一环，虽然我们每天都在使用它，但是我们可能只是用一些基本的 CSS 属性和选择器。本篇文章将介绍 20 个鲜为人知的 CSS 技巧，希望能够帮助读者更好地掌握 CSS。
1. 利用 :not() 伪类选择器
:not() 伪类选择器可以帮助我们选择除了某个元素之外的所有元素。例如：
li:not(.active) {
color: gray;
}
这里的 CSS 代码会选择除了带有 .active 类的 li 元素之外的所有 li 元素，并将它们的颜色设置为灰色。
2. 利用 :empty 伪类选择器
:empty 伪类选择器可以帮助我们选择不包含任何子元素的元素。例如：
div:empty {
display: none;
}
这里的 CSS 代码会选择不包含任何子元素的 div 元素，并将它们的 display 属性设置为 none，从而让它们在页面上消失。
3. 利用 :checked 伪类选择器
:checked 伪类选择器可以帮助我们选择被选中的表单元素。例如：
input:checked + label {
color: red;
}
这里的 CSS 代码会选择被选中的 input 元素的相邻 label 元素，并将它们的颜色设置为红色。
4. 利用 :focus-within 伪类选择器
:focus-within 伪类选择器可以帮助我们选择被焦点元素的父元素。例如：
.form-group:focus-within {
border: 2px solid #008080;
}
这里的 CSS 代码会选择包含被焦点元素的 form-group 元素，并将它们的边框设置为 2px 的实线，颜色为 #008080。
5. 利用 :nth-child() 伪类选择器
:nth-child() 伪类选择器可以帮助我们选择父元素中的第几个子元素。例如：
li:nth-child(odd) {
background-color: #f1f1f1;
}
这里的 CSS 代码会选择每个父元素的奇数子元素，并将它们的背景颜色设置为 #f1f1f1。
6. 利用 :before 和 :after 伪元素
:before 和 :after 伪元素可以帮助我们在元素的前后添加内容。例如：
h1:before {
content: "#";
margin-right: 5px;
}
这里的 CSS 代码会在每个 h1 元素的前面添加一个 # 号，并设置其右侧的 margin 为 5px。
7. 利用属性选择器
属性选择器可以帮助我们选择带有特定属性的元素。例如：
a[href^="https"] {
color: green;
}
这里的 CSS 代码会选择所有 href 属性以 https 开头的 a 元素，并将它们的颜色设置为绿色。
8. 利用 :lang() 伪类选择器
:lang() 伪类选择器可以帮助我们选择使用特定语言的元素。例如：
p:lang(zh) {
font-family: "Microsoft YaHei";
}
这里的 CSS 代码会选择所有使用中文（zh）语言的 p 元素，并将它们的字体设置为“Microsoft YaHei”。
9. 利用 :target 伪类选择器
:target 伪类选择器可以帮助我们选择当前 URL 中锚点指向的元素。例如：
#section1:target {
background-color: #f1f1f1;
}
这里的 CSS 代码会选择当前 URL 中锚点指向 id 为 section1 的元素，并将它的背景颜色设置为 #f1f1f1。
10. 利用 calc() 函数
calc() 函数可以帮助我们计算长度值。例如：
.container {
width: calc(100% - 20px);
}
这里的 CSS 代码会将 .container 元素的宽度设置为父元素宽度减去 20px。
11. 利用 attr() 函数
attr() 函数可以帮助我们获取元素的属性值并应用到样式中。例如：
img:after {
content: attr(alt);
}
这里的 CSS 代码会在每个 img 元素的后面添加其 alt 属性的值。
12. 利用 text-overflow 属性
text-overflow 属性可以帮助我们控制当文本溢出容器时应该如何处理。例如：
.container {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
这里的 CSS 代码会将 .container 元素内的文本截断并以省略号显示。
13. 利用 :first-letter 伪元素
:first-letter 伪元素可以帮助我们选择元素的第一个字母并对其应用样式。例如：
p:first-letter {
font-size: 2em;
color: #008080;
}
这里的 CSS 代码会选择每个 p 元素的第一个字母，并将其字体大小设置为 2em，颜色为 #008080。
14. 利用 :first-line 伪元素
:first-line 伪元素可以帮助我们选择元素的第一行并对其应用样式。例如：
p:first-line {
font-weight: bold;
}
这里的 CSS 代码会选择每个 p 元素的第一行，并将其字体加粗。
15. 利用 pointer-events 属性
pointer-events 属性可以帮助我们控制元素是否响应鼠标事件。例如：
.disabled {
pointer-events: none;
opacity: 0.5;
}
这里的 CSS 代码会将 .disabled 元素的鼠标事件响应关闭，并将其透明度设置为 0.5。
16. 利用 filter 属性
filter 属性可以帮助我们为元素添加滤镜效果。例如：
img {
filter: grayscale(100%);
}
这里的 CSS 代码会将每个 img 元素变成黑白色。
17. 利用 transform 属性
transform 属性可以帮助我们进行元素的旋转、缩放等操作。例如：
.card {
transform: rotate(10deg);
}
这里的 CSS 代码会将每个 .card 元素旋转 10 度。
18. 利用 box-shadow 属性
box-shadow 属性可以帮助我们为元素添加阴影效果。例如：
.box {
box-shadow: 5px 5px 5px #888;
}
这里的 CSS 代码会将每个 .box 元素添加一层 5px 的阴影。
19. 利用 animation 属性
animation 属性可以帮助我们为元素创建动画效果。例如：
@keyframes example {
from {transform: rotate(0);}
to {transform: rotate(360deg);}
}
.box {
animation: example 2s infinite;
}
这里的 CSS 代码会将每个 .box 元素旋转 360 度，每次旋转需要 2 秒钟，无限循环。
20. 利用 grid 布局
grid 布局可以帮助我们轻松地实现复杂的网格布局。例如：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 50px);
gap: 10px;
}
这里的 CSS 代码会将 .container 元素变成网格容器，每行有 3 列，每列的宽度相等，每行的高度为 50px，每个单元格之间有 10 像素的间隔。
结语
以上是 20 个鲜为人知的 CSS 技巧，希望能够帮助读者更好地掌握 CSS。如果你有任何其他的 CSS 技巧或建议，请在评论区留言，让我们一起分享。
评论(0)