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

最新推荐文章于 2022-07-21 16:52:36 发布

AKA俄语人Лев

最新推荐文章于 2022-07-21 16:52:36 发布

阅读量688

点赞数

分类专栏：前端HTML+CSS基础文章标签： css

本文链接：https://blog.csdn.net/weixin_47592060/article/details/116384457

版权

本文详细讲解了前端CSS中的伪类选择器，包括链接伪类、结构伪类，以及伪元素选择器如`::before`和`::after`的使用。此外，介绍了属性选择器的重要性和结构伪类在连续元素选择中的应用。最后，阐述了CSS精灵图的工作原理、背景缩放与`box-sizing`属性的关系，以及如何在实际开发中优化加载速度。

摘要由CSDN通过智能技术生成

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

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
}

三.伪元素选择器(双冒号:😃 （CSS3特有)

1.伪元素概念:
之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查

2.伪元素选择器结构:

E::first-letter =文本的第一个单词或字（如中文、日文、韩文等）
E::first-line =文本第一行；
E::selection =可改变选中文本的样式；
(鼠标去选中的文本都能变颜色,类似hover,CSS3非常灵动方便,以前还要用js才能非常复杂实现)

/* 首字特殊样式 */
p::first-letter {
   
  font-size: 20px;
  color: hotpink;
}

/* 首行特殊样式 */
p::first-line {
   
  color: skyblue;
}

p::selection {
   
  /* font-size: 50px; */
  color: orange;
}

4、E::before和E::after (E标签的前和后影分身伪元素选择器)(重点!!!)

**1.在E元素内部的开始位置和结束位创建一个幻象行内元素，且必须一定要结合content属性使用。

2.①:before/:after伪元素不是真正的元素也不是标签,
②只是可以间接当成幻象标签来使用两个E标签的影子侍卫,是E标签组成的一部分,是E标签内容的延伸
③能够展现在页面上也可以设置 css,但是得找到本体才能去设置哦,直接找找不到影密卫.

3.!!! 一定记住,content样式是必写样式项(否则失效)

4.E::before和E::after默认的展现模式是 inline 行内元素,需要设置为display:block才能设置宽高显示出来
或者间接方法变为块元素,比如给盒子加浮动float或者定位position(relative除外不脱标不会变为块元素),盒子都会间接从行内元素变为块元素.

5.语法结构:

div::befor {
   
  content:"开始";
}
div::after {
   
  content:"结束";
}

6.基础应用:

1.最早是给纯文本content内容使用的:文字一前一后加东西:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c4ZZe0FY-1620063559482)(C:\Users\tuyue\AppData\Local\Temp\1611753252761.png)]

E::before / E::after作为一个单独新标签, 和原始标签E一起联用:

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

3.适用于没有实际内容的空盒子标签,只是设计背景图片和样式而已,那么就去他们前面的标签设置E::before / E::after镜像

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

伪元素注意1(兼容高版本):E:after、E:before 在旧版本CSS2里是伪元素，但在CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容高版本处理。

伪元素注意2(兼容低版本): 注意: IE9下低版本不支持:: 所以保证低版本兼容可以::写为 :

伪元素注意3:
伪元素:before和:after添加的内容默认是inline元素；这个两个伪元素的content属性，表示伪元素的内容,设置:before和:after时必须设置其content属性，否则伪元素就不起作用。

总结:
1.写:冒号可以被高版本自动识别,低版本正好兼容适应,只是规范是双冒号而已,实际开发多用单冒号
2.样式内一定记得加content属性名来激活E:after、E:before ,否则一定失效

6.before/after前和后影分身伪元素选择器 +属性选择器综合大案例!!!

PS:但是有个细节注意:before和after始终li的影分身不是真实标签,因此无法继承父和传承子任何元素标签,他始终是属于li的一部分,而不是属于a标签的一部分,因此当我们点图标的时候是:①无法获取a标签的hover伪类样式和②无法通过点击影分身标图进去a标签链接的.

如何解决:如果你只是希望获取a元素的hover伪类选择器并且将样式应用于:before伪元素选择器上，则需要编写a:hover:before或a:visited:before (意思是将带有hover样式的a标签赋予before前影子,这样前)
(不可以写a:before:hover,因为伪元素不是标签没有样式)

②往上跳一级即可

在这里插入图片描述

把全部before和after不应用到li下的span中,而是应用到a标签即可,这样before和after就是a标签的一部分了,

.container li:before { } ------> .container li a:before { }

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

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <titl

最低0.47元/天解锁文章

AKA俄语人Лев

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

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

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

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

:first-of-type: 匹配同类型中的第一个同级兄弟元素 没有() 参数

:last-of-type: 匹配同类型中的最后一个同级兄弟元素 没有() 参数

:only-of-type 匹配同类型中的唯一一个指定类型元素 没有() 参数

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

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

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

三.伪元素选择器(双冒号:😃 （CSS3特有)

4、E::before和E::after (E标签的前和后影分身伪元素选择器)(重点!!!)

6.before/after前和后影分身伪元素选择器 +属性选择器综合大案例!!!

:first-of-type: 匹配同类型中的第一个同级兄弟元素没有() 参数

:last-of-type: 匹配同类型中的最后一个同级兄弟元素没有() 参数

:only-of-type 匹配同类型中的唯一一个指定类型元素没有() 参数

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