选择器的类型

Posted 2021-01-26 tangdiying

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名）{
属性名：属性值；
}