国外免费iphone网站南安seo优化推广

基础选择器组合

• 空格：后代选择器
  > 直接子元素选择器
. 类选择器
: 伪类选择器

• 多类选择器

.class1.class2 ：多类组合
.class1 .class2 ：类的所有后代
.class1 > .class2 ：类的子元素

• 特殊选择器

:nth-child()
:nth-of-type()

<div class="red"><p class="bold">第一层</p><div class="box"><p class="bold">第二层</p></div>
</div>

三种不同的选择器效果：

/* 1. 同时具有两个类 */
.red.bold {/* 什么都选不到，因为没有同时具有这两个类的元素 */
}/* 2. 直接子元素 */
.red > .bold {/* 只选中"第一层"，因为它是 .red 的直接子元素 */
}/* 3. 所有后代 */
.red .bold {/* 选中"第一层"和"第二层"，因为它们都在 .red 下面 */
}

这种区别在构建复杂布局时特别重要，可以精确控制样式的应用范围。

万事顺遂🫰