css选择器
css定义:层叠样式表
类型： 1,内嵌式; 2,行内式; 3,外链式;
1，标签选择器
作用：根据指定的标签，在当前界面中找到所有该名称的标签，然后设置属性：
格式“
标签名称{
属性：值；
}
注意点:
标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签
标签选择器无论标签藏得多深都能选中
2，类选择器
作用: 根据指定的类名称找到对应的标签, 然后设置属性
格式:
.类名{
属性:值;
}
格式:
<标签名称 class="类名1 类名2 ..."> 类名写在双引号内
错误的写法:
<p class="para1" class="para2">
注意点:
每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名
在同一个界面中class的名称是可以重复的
在编写class选择器时一定要在class名称前面加上点
类名的命名规范和id名称的命名规范一样
类名就是专门用来给CSS设置样式的
在HTML中每个标签可以同时绑定多个类名
3，id和class的区别?
1.1
id相当于人的身份证不可以重复
class相当于人的名称可以重复
1.2
一个HTML标签只能绑定一个id名称
一个HTML标签可以绑定多个class名称
4，id选择器和class选择器区别?
id选择器是以#开头
class选择器是以.开头
在企业开发中到底用id选择器还是用class选择器?
id一般情况下是给js使用的, 所以除非特殊情况, 否则不要使用id去设置样式
在企业开发中一个开发人员对类的使用可以看出这个开发人员的技术水平
一般情况下在企业开发中要注重冗余代码的抽取, 可以将一些公共的代码抽取到一个类选择器中, 然后让标签和这个类选择器绑定即可
5，通配符选择器
作用: 给当前界面上所有的标签设置属性
格式:
*{
属性:值;
}
注意点:
由于通配符选择器是设置界面上所有的标签的属性, 所以在设置之前会遍历所有的标签, 如果当前界面上的标签比较多, 那么性能就会比较差, 所以在企业开发中一般不会使用通配符选择器
复合选择器
1,后代选择器:
作用: 找到指定标签的所有特定的后代标签, 设置属性
格式:
标签名称1 标签名称2{
属性:值;
}
先找到所有名称叫做"标签名称1"的标签, 然后再在这个标签下面去查找所有名称叫做"标签名称2"的标签, 然后在设置属性
注意点:
后代选择器必须用空格隔开
后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代
后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器
后代选择器可以通过空格一直延续下去
2,子元素选择器/子代选择器
作用: 找到指定标签中所有特定的直接子元素, 然后设置属性
格式:
标签名称1>标签名称2{
属性:值;
}
先找到所有名称叫做"标签名称1"的标签, 然后在这个标签中查找所有直接子元素名称叫做"标签名称2"的元素
注意点:
子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
子元素选择器之间需要用>符号连接, 可以加空格或者不加空格
子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器
子元素选择器可以通过>符号一直延续下去
3,并集选择器
作用: 给所有选择器选中的标签设置属性
格式:
选择器1,选择器2...{
属性:值;
}
注意点:
并集选择器必须使用,来连接,可以连接多个选择器
选择器可以使用标签名称/id名称/class名称
4,交集选择器
作用: 给所有选择器选中的标签中, 相交的那部分标签设置属性
格式:
选择器1选择器2{
属性: 值;
}
注意点:
选择器和选择器之间没有任何的连接符号
选择器可以使用标签名称/id名称/class名称
交集选择器仅仅作为了解, 企业开发中用的并不多
要求更改带有box类名和p标签的样式案例
5,伪类选择器
作用：选中鼠标悬停在元素上的状态，设置样式
格式：
选择器:hover { css }
注意点：
- 伪类选择器选中的元素的某种状态
6,结构伪类选择器
1. 作用与优势：
1. 作用：根据元素在HTML中的结构关系查找元素
2. 优势：减少对于HTML中类的依赖，有利于保持代码整洁
3. 场景：常用于查找某父级选择器中的子元素，同级别的第几个；
p:first-child 选中同级别的第一个标签；但不区分类型，也就是会取时同级
的第一个标签，别但不一定会是p标签，当其他标签与p同级别时又位于第一位时；
p:last-child 选中同级别的最后一个标签；
p:nth-child(3) 选中同级别的第三个标签；
p:nth-child(n) 选中同级别的第n个标签,注意不区分类型；
p:nth-last-child(n) 选中同级别的倒数第n个标签；
通过n可以组成常见 公式:
偶数 2n even
奇数 2n-1 2n+1 odd
找到前五个 -n+5
找到从第五个往后 n+5
（了解）E:nth-of-type(){}结构伪类选择器
只在父元素的同类型(E)子元素范围中,匹配第n个;
:nth-child → 直接在所有孩子中数个数
:nth-of-type → 先通过该 类型 找到符合的一堆子元素，然后在这一堆子元素中数个数
