css高阶语法

1. CSS 变量（Custom Properties）

CSS 变量允许你定义可重用的值，使用 -- 前缀来定义变量。

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

.button {
    background-color: var(--main-color);
}
​

2. 媒体查询（Media Queries）

媒体查询用于根据不同的设备特性（如屏幕宽度）应用不同的样式。

@media (max-width: 600px) {
    .container {
        flex-direction: column;
    }
}
​

3. Flexbox

Flexbox 是一种布局模型，可以轻松地在容器中对齐和分配空间。

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
​

4. Grid 布局

CSS Grid 布局允许你创建复杂的二维布局。

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
​

5. 伪类和伪元素

伪类和伪元素用于选择元素的特定状态或部分。

a:hover {
    color: red;
}

p::first-line {
    font-weight: bold;
}
​

6. 组合选择器

组合选择器允许你选择特定的元素组合。

div > p {
    color: blue; /* 选择直接子元素的 p */
}

ul li:hover {
    background-color: yellow; /* 选择悬停的 li */
}
​

7. 动画和过渡

CSS 动画和过渡可以创建平滑的视觉效果。

.button {
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: #2980b9;
}
​

8. 计算函数（calc）

calc() 函数允许你在 CSS 中进行简单的数学计算。

.container {
    width: calc(100% - 20px);
}
​

9. 选择器优先级

了解选择器的优先级规则可以帮助你更好地控制样式的应用。

10. CSS 预处理器

使用 Sass 或 LESS 等预处理器可以增强 CSS 的功能，如嵌套、混合、继承等。