自学前端第十五天:伪类伪元素和属性选择器和精灵图

#一.基础伪类选择器(也是交集选择器一种,优先级也要叠加)

1.概念:某个选择器的镜像,当光标移动到盒子时会触发新的一面不同的效果,但是是短暂的而已

2.作用:伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果。

3.优先级权重:伪类分值和类名选择器一样是0,0,1,0分的,因此a:hover 叠加= 0,0,1,1(很重要!!!)

4.伪类语法结构:

① 类选择器是一个点 比如 .demo {}
②而我们的伪类 用冒号  比如  类 :link{}

a {   /* a是标签选择器  所有的链接 */font-weight: 700;font-size: 16px;color: gray;}
a:hover {   /* :hover 是链接伪类选择器 鼠标经过 (冒号之间不能有空格) */color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
}

4.a链接伪类选择器 (大多是给a标签用的,并不是只能给a用!)

a :link {} /* 修改未访问的链接的a链接样式,一直生效 */
a :visited {} /* 修改已访问过后的a链接样式,并且一直生效,除非清除浏览器记录才会返回未访问时的link样式,刷新没用,慎用 */
a :hover {} /* 修改鼠标移动到链接上,短暂生效 */
a :active {} /* 修改鼠标摁在的链接的样式,短暂生效 */

①上面四种状态可以一起使用.,但要注意书写的顺序(,一步一步提高用户视觉感)**

②切记,如果不使用a :visited {} ,则link写了也不生效.

③书写顺序:他们的顺序尽量不要颠倒按照 lvha 的顺序。 love hate 爱上了讨厌记忆法或者 lv 包包非常 hao

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>a标签的伪类选择器</title><style>* {margin: 0;padding: 0;}a:link {color: #368;}/*未访问时*/a:visited {/*已访问*/color: green;}a:hover {color: red;}/*鼠标停在链接,没按住*/a:active {/*正在激活 正在按住*/color: pink;}</style>
</head><body><a target="_blank" href="https://www.baidu.com/s">百度知道</a></body>
</html>

二.结构(位置)伪类选择器:（CSS3特有,很方便但不好理解)

1.结构伪类选择器样式结构组成:

下面的n都是可以是一个数字1234，一个关键字odd/even，或者一个公式2n / 2n+1 /3n+1 等/暂不支持次方

①E:nth-child(n) :匹配属于当前父类型E的第 N 个子元素，父子可以类型不同 (就是当前爸爸的第几个儿子)
E:first-child :选取属于其父元素的首个子元素的指定选择器
E:last-child :选取属于其父元素的最后一个子元素的指定选择器
E:nth-last-child(n) ：选择器匹配E元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
（即匹配属于当前父类型E的倒数第 N 个子元素，父子可以类型不同 (就是当前爸爸的倒数第几个儿子) ）

②E:nth-of-type(n): (就是找当前类型E的第n个"同级"并且"同类型"的兄弟),比找儿子元素更精准
:first-of-type: 匹配同类型中的第一个同级兄弟元素没有() 参数
:last-of-type: 匹配同类型中的最后一个同级兄弟元素没有() 参数
:only-of-type 匹配同类型中的唯一一个指定类型元素没有() 参数
E:not(s) E选择器,排除指定的元素或选择器 selector为选择器,剩下所有的都生效 (not括号不能写公式了n/2n之类的)

③E:not(s) 的排除结构伪类选择器的样式还可以组合写:
[1]div:not(a) {} :找全部div标签选择器,但是除内部所有子元素为a标签的,即剩下所有子元素都能生效样式除了a
[2]div p:not(a) {}:找div下的p类型除了p内部有a标签子元素的
[3]div p:nth-of-type(2n):not(.des) {}:找div下的p类型的同级同类型2n兄弟,但除了类名为des的p兄弟
[4].des:not(a) {} :找类名为des.的标签但是除所有类名为des的a标签
[5].des:not(a):not(.c888):not(.c222) {}:类名为des.但是除了所有a标签和类名为c888和c222类名的所有标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HC4xkxSP-1620063559468)(C:\Users\tuyue\AppData\Local\Temp\1611642375737.png)]

④注意特殊情况:当使用类名选择器去寻找同级兄弟时,如果两个标签的类名是冲突的,该如何解决??
答案:会分开找,各自类名所属标签下的同级同类型的兄弟!
1.比如:下面的p和a标签的类名都是.des,那么他会找第一个类名为des的p标签下有没有同级同类型第三个p,结果没有
就会放弃,再次去寻找第一个类名为des的a标签下有没有同级同类型第三个a标签,结果有,就匹配类名为des的a标签而放弃p标签,因为找不到.

2.但在实际开发中也怕这样的混淆,都是用标签名p作为主体的,不会用类名,即使用类名选择器最好带上标签如:p.des.

3.因此,最终下面这图时是类名为des的a标签的内容为3a的生效红色.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8veM2FVJ-1620063559472)(C:\Users\tuyue\AppData\Local\Temp\1611640300713.png)]

4.而下面图, 类名为des的p和a标签都能如愿找到自己同级同类型的第三个兄弟

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zkmNt2hh-1620063559480)(C:\Users\tuyue\AppData\Local\Temp\1611639766947.png)]

5. 结构伪类选择器的应用大多在很多连续的li或者p中，可以不给li一个一个分别给class类名因为看着很冗余，就可以使用结构伪类选择器去选择里面的第几个孩子或者兄弟.

li:first-child { /*  选择第一个孩子 */color: pink;
}
li:last-child {   /* 最后一个孩子 */color: purple;
}
li:nth-child(4) {   /* 选择第4个孩子  n 代表 第几个的意思 */ color: skyblue;
}p:nth-of-type(3) { /* 选择第3个同类别的兄弟元素  n  代表 第几个的意思 */   background-color: #f00;
}
p:first-of-type {   /* 选择每个p元素是其父级的第一个p元素*/     color: skyblue;
}
p:last-of-type { /* 选择每个p元素是其父级的最后一个p元素 */color: pink;
}
p:only-of-type { /* 选择每个p元素是其父级的唯一p元素 */color: yellow;
}
p:not(.desc) { /* 选中除了类名为desc的其他p标签*/color: green
}

三.伪元素选择器(双冒号: