css10种选择器（css类选择器）

CSS选择器是CSS语言的一个重要组成部分。它们定义了我们在HTML页面文件中要样式化的元素或元素组的方式。在CSS中，有10种不同的选择器类型，每种选择器形式都存在独特的情况。

1. 类选择器.classname {
    property: value;
}

类选择器使用元素的类属性标识选择元素或元素组。这是在HTML和CSS中广泛使用的选择器类型。

2. ID选择器#idname {
    property: value;
}

ID选择器使用元素的id属性标识选择元素。每个HTML元素在页面上都应该具有唯一的id。在CSS中，使用ID选择器样式化具有特定id的元素。

3. 标签选择器tagname {
    property: value;
}

标签选择器使用具有指定标签类型的HTML元素标识选择元素。使用标签选择器，可以通用地对所选的元素应用样式。

4. 相邻兄弟选择器selector1 + selector2 {
    property: value;
}

相邻兄弟选择器选择在指定元素之后紧随的元素。这个选择器只选择下一个元素。

5. 通用选择器* {
    property: value;
}
    

通用选择器选择文档中所有的元素。使用通用选择器时必须小心，因为它们可能导致删除一些样式。

6. 子选择器parent >
child {
    property: value;
}

子选择器选择一个父元素中特定的子元素。这里，“child”元素必须是直接子元素，而不是任意后代元素。

7. 属性选择器[attribute=value] {
    property: value;
}

属性选择器根据元素的属性选择元素。这种选择器很灵活，可以选择任何拥有指定属性的元素。

8. 伪元素选择器selector::pseudo-element {
    property: value;
}

伪元素选择器选择文档中特定的元素或特定元素的部分。例如，使用"::before"选择器显示在元素前面插入的内容。

9. 否定伪类选择器selector:not(subselector) {
    property: value;
}

否定伪类选择器选择没有指定子选择器的元素。

10. 组合选择器selector1, selector2, selector3 {
    property: value;
}
    

组合选择器将多个选择器组合在一起以选择一个或多个元素。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！