一.伪类选择器
1.伪类(不存在的类,特殊的类)
定义:不真实存在的类,是一种特殊的类,它表示的元素的一种状态,不是固定某一定
例如:第一名,倒数第一名,鼠标悬浮,鼠标点击等
常见的伪类选择器:
语法使用‘:’开头
:first-child 第一个元素
:last-child 最后一个元素
:nth-child() 选中第几个元素
特殊值: 2n或even 偶数
2n+1或odd 奇数
以上这些伪类都是根据所有的子元素进行排序
:first-of-type 第一个元素
:last-of-type 最后一个元素
:nth-of-type() 选中第几个元素
功能跟上面相似,不同的是,这是在同类型的子元素中去选择
2.:not() 否定伪类
将符合条件的元素从选择器中去除
拓展知识:
1.去除li的项目符号
li{
list-style:none;
}
2.去除a标签的下划线
a{
text-decoration:none;
}
3.增加下划线
h1{
text-decoration:underline;
}
二.a元素的伪类
1、:link 没有访问过的状态
(给未访问过的超链接加红色字体)
a:link{
color: red;
}
2、:visited 访问过的状态
(给访问过的超链接加绿色字体)
a:visited{
color: green;
}
3、:hover 鼠标移入的状态
(鼠标移入,链接字体变大到30px)
a:hover{
font-size: 30px;
}
4、:active 鼠标点击后的状态
(鼠标点击后,增加背景色pink)
a:active{
background-color: pink;
}
注意:
1、:link和:visited 是a标签独有的伪类
2、由于隐私问题,:link和:visited只能设置字体颜色
3、 :hover和:active 针对所有的元素
三. 伪元素选择器
1、::first-letter 第一个字母
(让文章的首字母一直为字体为24px)
p::first-letter {
font-size: 34px;
}
2、::first-line 第一行
(让文章的第一行添加背景色黄色)
p::first-line {
background-color: yellow;
}
3、::selection 选中的内容
(让选中的内容,字体为红色)
p::selection {
color: red;
}
4、::before 在元素的最前面
必须要配合content样式名使用
在元素开始的位置前+'abc')
p::before{
content: "你好";
}
5、::after 在元素的最后面
必须要配合content样式名使用
p::after{
content: '你也好啊';
}
四.继承
样式的继承(继承祖先的资产)
定义:给父元素或者祖先元素设置有关样式,它会继承到子元素或后代元素上,
优势:一般情况下,样式的继承是对我们开发是有利,不需要额外调整
注意:不是所有的样式都能继承,一般情况布局上样式
共同的祖先元素,设置统一的字体大小、字体颜色、行高、字体等
五.选择器的权重
样式冲突
给同一个元素设置相同的样式名,不一样的样式值,最终哪个样式有效果,是看选择器的权重,谁的权重高,就有效果
选择器的权重
内联样式 1000
id选择器 100
类和伪类选择器/属性选择器 10
元素选择器 1
通配符、子选择器、相邻选择器等。如*、>、+ 0000
继承的样式 没有优先级
!important 最高优先级
注意
1、如果选择器的权重一样,那么谁靠下,就谁生效
2、要让所有选择器的权重相加,最终谁大听谁的
3、所有的选择器权重相加,最高也不会超过上一等级的权重,如再多的类选择器权重相加,也不会超过id选择器权重
4、在并集选择器(群组选择器)当中,选择器权重是各算各的,最终谁大听谁的
5、!important 是最高的权重 但慎用
6、比较优先级时,需要将所有选择器的优先级进行相加计算,最后优先级越高,则优先显示
(并集选择器)分组选择器是单独计算的
7、如果优先级计算后相同,此时则优先使用靠下的样式
8 、 选择器的累加,不会超过上一级数量级,例如:类选择器再高也不会超过id选择器 量变达不到质变
一般来说:
选择器越具体,优先级越高
一般情况下,可以测试使用,测试是否是选择器权重的问题
如果样式设置不成功:
1、你没选中
2、选择器权重问题 !important进行测试
六.display
1.display实现元素之间的相互转换
a.将元素转成行内元素
display: inline;
b.将元素转成块元素
display: block;
c.将元素转成行内块元素
display: inline-block;
d. 隐藏元素
display: none;
2.元素分类
(1) 块元素
a、独占一行
b、宽度是父元素或祖先元素内容区宽度
c、高度是被内容撑开,可以自定义宽高
(2)行内元素
a、不会独占一行
b、宽高都是被内容撑开,不可以自定义宽高
(3)行内块元素
兼具块元素和行内元素的特点,即不会独占一行,可以设置宽高