选择器的类型

Posted tangdiying

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了选择器的类型相关的知识,希望对你有一定的参考价值。

1、标签选择器:给同一种标签添加样式;
代码:
标签名 {
属性名:属性值;
}

2、通用选择器(通配符):给所有的标签添加样式;
代码:
* {
属性名:属性值;
}
注意:通用选择器是先遍历页面当中所有的标签,然后再给这些标签添加样式,所以这个选择器的性能非常低;一般只会在测试的时候使用,用于css的初始化,但是在项目当中不要使用;

3、类选择器:给同一类(同一个群体)标签添加样式;要先给同一类标签取一个名字;
属性--class给标签命名类名;
代码:
.class名(类名){
属性名:属性值;
}
注意:一个类名可以给多个标签,一个标签可以有多个类名,多个类名之间用“空格”隔开;

4、id选择器:给某一个标签添加样式;要先取一个id名
属性--id;
代码:
#ID名 {
属性名:属性值;
}
注意:一个ID名只能给一个标签,一个标签只能有一个ID名;(从一而终)

5、后代选择器:选择的是某一个元素的后代元素;
代码:
祖先选择器 后代名 {
属性名:属性值;
}
注意:中间是用“空格”连接,表示“里面的”意思;

选择器原理:是由内向外查找,先查找所有的p,然后判断这个p是否由满足要求的父节点father,不满足就继续向上一级查找,没有找到就不满要求,找到了才给这个p添加样式;

6、子选择器:选择某个元素的直接后代;
代码:
父选择器>子级{
属性名:属性值;
}

7、相邻兄弟选择器:选择紧挨着该元素的后面的一个元素;
代码:
元素名+兄弟名{
属性名:属性值;
}

8、通用兄弟选择器:选择的是该元素后面的所有的某一种元素;
代码:
元素名~兄弟名{
属性名:属性值;
}

9、并集选择器:将两个不相干的元素同时添加相同属性;
代码:
元素1,元素2,元素3......{
属性名:属性值;
}

10、交集选择器:当标签和类名(ID名)都冲突的时候,使用交集选择器;
代码:
元素名.类名(#ID名){
属性名:属性值;
}















































以上是关于选择器的类型的主要内容,如果未能解决你的问题,请参考以下文章

属于交换选择器的都有哪些

css选择器最常用的类型

如何获取选择器的输入参数类型?

带有选择器的 SwiftUI 列表:选择不适用于自定义类型(macOS)

CSS关联选择器的大致类型总结

关于选择器的整理