CSS 中的高级逻辑

1. 选择器嵌套

在 CSS 中，我们可以将一个选择器嵌套到另一个选择器中，这样就可以非常方便地选择嵌套元素。示例如下：

.parent {
  color: #333;
  font-size: 16px;
  background: #f0f0f0;
  .child {
    color: red;
    font-size: 20px;
    background: #fff;
  }
}

上面的代码中，我们将 .child 选择器嵌套到了 .parent 选择器中，这样就可以非常方便地为 .child 元素设置样式。

2. 状态选择器

状态选择器是指根据元素的状态来选择元素的样式，例如 :hover、:active、:focus 等。示例如下：

a:hover {
  color: red;
  text-decoration: underline;
}

input:focus {
  box-shadow: 0 0 5px #eee;
}

上面的代码中，当鼠标悬停在链接上时，链接的颜色会变成红色，并且会添加下划线；当 input 元素获得焦点时，会出现一个淡色阴影效果。

3. 伪元素选择器

伪元素选择器是指可以选择元素的某个部分，并给它们设置样式，例如 ::before、::after 等。示例如下：

p::before {
  content: "<";
  color: red;
  font-size: 20px;
}

p::after {
  content: ">";
  color: red;
  font-size: 20px;
}

上面的代码中，我们通过 ::before 和 ::after 伪元素选择器在段落前面和后面添加了一个 < 和 > 符号。

4. 属性选择器

属性选择器是指根据元素的属性选择元素并设置样式，例如 [attribute=value]、[attribute~="value"] 等。示例如下：

input[type="text"] {
  border: 1px solid #ccc;
}

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

上面的代码中，我们使用属性选择器选择了 type 属性值为 text 的 input 元素，并为它添加了一个边框；使用属性选择器选择了 href 属性值以 https 开头的链接，并将文字颜色设置为绿色。

5. 组合选择器

组合选择器是指根据多个选择器的组合选择元素，并设置样式，例如 .parent .child、.parent > .child 等。示例如下：

.parent .child {
  color: red;
}

.parent > .child {
  font-size: 20px;
}

上面的代码中，我们使用 .parent .child 组合选择器选择父元素为 .parent 的子元素中的 .child 元素，并将文字颜色设置为红色；使用 .parent > .child 组合选择器选择父元素为 .parent 的直接子元素中的 .child 元素，并将文字大小设置为 20px。

以上是 CSS 中的高级逻辑。通过灵活运用选择器嵌套、状态选择器、伪元素选择器、属性选择器、组合选择器等，可以让我们更加方便地选择元素，并为它们设置样式。