你觉得css高级的特性有哪些？"```markdown ## CSS高级特性 ### 1. Flexbox Flexb

"```markdown

Flexbox布局是CSS的一种布局模式，使得在容器内对齐、分布和调整元素的大小变得更加灵活和高效。通过设置display: flex;，可以轻松创建响应式布局。

.container {
  display: flex;
  justify-content: space-between; /* 水平对齐 */
  align-items: center; /* 垂直对齐 */
}

CSS Grid是另一种强大的布局系统，允许开发者使用行和列来创建复杂的布局。通过display: grid;，可以定义网格并精确控制元素的位置。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列等分 */
  gap: 10px; /* 网格间距 */
}

CSS变量允许开发者定义可重用的值，增加了样式的灵活性和可维护性。使用var()函数可以方便地引用这些变量。

:root {
  --main-color: #3498db; /* 定义变量 */
}

.button {
  background-color: var(--main-color); /* 使用变量 */
}

伪类（如:hover、:focus）和伪元素（如::before、::after）使得在特定状态下或在元素内容前后添加样式变得简单。

.button:hover {
  background-color: #2980b9; /* 悬停状态变化 */
}

.button::after {
  content: '✓'; /* 添加内容 */
  margin-left: 5px;
}

媒体查询使得响应式设计变得可能，通过根据视口大小或设备特性应用不同的样式，提升用户体验。

@media (max-width: 600px) {
  .container {
    flex-direction: column; /* 小屏幕下垂直排列 */
  }
}

CSS提供了动画和过渡属性，使得元素在状态变化时具有平滑的视觉效果。

.box {
  transition: transform 0.3s ease; /* 平滑过渡 */
}

.box:hover {
  transform: scale(1.1); /* 放大效果 */
}

CSS选择器具有不同的优先级，理解这点对于有效管理样式非常重要。ID选择器优先级高于类选择器，而类选择器优先级高于元素选择器。

采用BEM（块、元素、修饰符）、OOCSS（面向对象的CSS）等命名规范，有助于提高代码的可读性和可维护性。

使用复杂选择器（例如，嵌套选择器、相邻兄弟选择器）可以更精确地选择元素，从而提高样式的可控性。

.parent .child {
  color: red; /* 选择父元素下的子元素 */
}

.sibling + .sibling {
  margin-top: 10px; /* 选择相邻兄弟元素 */
}

CSS特性查询允许开发者根据支持的特性来应用样式，增强了样式的灵活性。

@supports (display: grid) {
  .grid-container {
    display: grid; /* 仅在支持Grid布局时应用 */
  }
}