CSS——选择器及三大特性
标签选择器
1.什么标签选择器:
2.作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性.
3.注意点：
*标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签
*标签选择器无论标签藏得多深都能选中
*只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input…)
4.格式
标签名称{
属性:值;
}
id选择器
1.什么是id选择器：
2.作用: 根据指定的id名称找到对应的标签,然后设置属性.
3.注意点:
*每个HTML标签都有一个属性叫做id, 也就是说每个标签都可以设置id
**<p id="identity">必成高富帅</p>
*在同一个界面中id的名称是不可以重复的
*在编写id选择器时一定要在id名称前面加上#
*id的名称是有一定的规范
*在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为在前端开发中id是留给js使用的
类选择器
1.什么是类选择器?
2.作用: 根据指定的类名称找到对应的标签,然后设置属性.
3.格式:
.类名{
属性:值;
}
4.类名的命名规范和id名称的命名规范一样
5.类名就是专门用来给CSS设置样式的
6.在HTML中每个标签可以同时绑定多个类名
id选择器和类选择器的区别：
*id相当于人的身份证，是不可以重复的。class相当于人的名称，是可以重复的
*一个HTML标签只能绑定一个id名称，一个HTML标签可以绑定多个class名称
*id选择器是以#开头，类选择器是以.开头
*id选择器一般是给js使用
*为了避免代码冗余，一般情况下会将冗余的代码抽取到类加载器中，然后让标签和这个类选择器进行绑定
后代选择器:
1.格式:选择器1 选择器2{属性名:属性值}
<!-- 先找到所有名称叫做"标签名称1"的标签,然后再在这个标签下面去查找所有名称叫做"标签名称2"
的标签,然后设置属性值 div p{} -->
2.注意点：
*后代选择器必须空格隔开
*后代选择器包括一切放在指定选择器中的后代
*后代选择器不仅仅可以使用标签选择器，其他选择器也可以使用
.p1 p2{}
.p1 #i{}
*后代选择器可以将空格一直沿用下去，直到找到指定选择器为止
div ul li p{
color: red;
}
子元素选择器
1.什么是子元素选择器?
2.作用: 找到指定标签中所有特定的直接子元素, 然后设置属性.
3.格式：选择器1>选择器2{属性名:属性值}
4.注意点：
1.子元素选择器只会查找儿子，不会查找其他嵌套的标签
2.子元素选择器之间需要用>符号连接, 并且不能有空格
3.子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器
4.子元素选择器可以通过>符号一直延续下去
后代选择器和子选择器的区别
1.后代选择器使用空格作为连接符号; 子元素选择器使用>作为连接符号
2.后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿子/孙子…; 子元素选择器只会选中指定标签中, 也就是只会选中特定的儿子标签。
3.后代选择器和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器
4.后代选择器和子元素选择器都可以通过各自的连接符号一直延续下去
5.如何选择?
**如果想选中指定标签中的所有特定的标签, 那么就使用后代选择器
**如果只想选中指定标签中的所有特定儿子标签, 那么就使用子元素选择器
并集选择器
1.什么是并集选择器?
2.作用: 给所有选择器选中的标签设置属性.
3.格式：
选择器1,选择器2{
属性:值;
}
4.注意点:
*并集选择器使用,分开
*选择器可以使用class,id,标签,名称
**.class,.zd,#id{属性名称:属性值}
兄弟选择器
1.什么是相邻兄弟选择器?
2.作用: 给指定选择器后面紧跟的那个选择器选中的标签设置属性.
3.格式：
选择器1+选择器2{
属性:值;
}
4.注意点:
1.相邻兄弟选择器必须通过+连接
2.相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签
通用兄弟选择器(CSS3)
1.什么是通用兄弟选择器?
2.作用: 给指定选择器后面的所有选择器选中的所有标签设置属性.
3.格式：
选择器1~选择器2{
属性:值;
}
4.注意点：
1.通用兄弟选择器用~连接
2.通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中
序选择器
1.什么是序选择器?
2.作用: 选中指定的任意标签然后设置属性.
3.格式：
*同级别的第几个(这里的同级别是指标签是否嵌套)
标签名:first-child 选中同级别中的第一个标签
标签名:last-child 选中同级别中的最后一个标签
标签名:nth-child(n) 选中同级别中的第n个标签
标签名:nth-last-child(n) 选中同级别中的倒数第n个标签
标签名:only-child 选中父元素中有唯一的标签
*同类型的第几个
标签名:first-of-type 选中同级别中同类型的第一个标签
标签名:last-of-type 选中同级别中同类型的最后一个标签
标签名:nth-of-type(n) 选中同级别中同类型的第n个标签
标签名:nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签
标签名:only-of-type 选中父元素中唯一类型的某个标签
a标签伪类选择器
1.什么是a标签的伪类选择器?
2.作用：a标签的伪类选择器是专门用来修改a标签不同状态的样式.
3.格式：
：link 修改未被访问的样式
: visited 访问被访问的样式
: hover 访问悬停在a标签的样式
: active 修改鼠标长按状态下的样式
4.注意点：
1.a标签的伪类选择器可以单独出现也可以一起出现
2.a标签伪类选择器如果出现，需要按照严格的顺序, love hate
l :link
v :visited
h :hover
a :active
5.经验：
1.开发中编写a标签的伪类选择器最好写在标签选择器的后面
2.a标签盒子相关的属性都写在标签选择器中(显示模式/宽度/高度/padding/margin)
3. a标签文字/背景相关的都写在伪类选择器中
CSS三大特性
1.继承性
*什么是继承性？(也就是在标签嵌套中最内层的标签可以继承外层标签设置的样式)
*作用:父标签设置的属性，子标签也可以使用
2.注意点
*并不是所有的属性都可以继承，只有以color/font-/text-/line-开头的属性才可以继承。
*在CSS的继承中不仅仅是儿子可以继承，只要是后代都可以继承
*应用场景
一般用于设置网页上的一些共性信息, 例如网页的文字颜色,字体,文字大小等内容 body{}
3.层叠性
*什么是层叠性?
*作用: 层叠性就是CSS处理冲突的一种能力.
*注意点
层叠性只有在多个选择器选中"同一个标签",然后又设置了"相同的属性", 才会发生层叠性.
我是段落
#优先级 1.什么是优先级? 2.作用: 当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时,如何层叠就由优先级来确定. 3.优先级判断的三种方式 *间接选中就是指继承： 如果是间接选中,那么就看谁离目标标签最近就听谁的. /* 是蓝色 */ ul{ color: red; } li{ color: blue; } *相同选择器(直接选中)
如果都是直接选中,并且都是同类型的选择器,那么就是谁写在后面听谁的
/* 是greenyellow色 */
p{
color: red;
}
p{
color: greenyellow;
}
不同选择器(直接选中)
优先级: id>类>标签>>继承>默认
