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

AKA俄语人Лев

于 2021-05-04 01:47:39 发布

409

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

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

版权

前端HTML+CSS基础专栏收录该内容

34 篇文章 4 订阅

订阅专栏

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

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">
  <title>homework</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html {
      font-size: 14px;
    }

    body {
      background-color: skyblue;
    }

    ul {
      list-style: none;
    }

    a {
      color: #333;
      text-decoration: none;
    }

    .container {
      width: 700px;
      margin: 50px auto;
    }

    .container ul li {
      display: inline-block;
      width: 288px;
      margin-right: 59px;
      line-height: 34px;
    }

   /*  .container li span {
      display: inline-block;
      vertical-align: middle;
      line-height: 20px;
    } */

/*     .container li span:nth-of-type(1) {                (全部li下的第一个span )
      width: 20px;
      height: 20px;
      margin-right: 8px;
      font-size: 12px;
      color: #fff;
      text-align: center;
      background: url(img/top_rank.png) no-repeat -10px -10px;
    } 

    .container li span:nth-of-type(2) {          
      ( 处理超长标题的方法:给每个li下的第二span即每行的标题,最大宽度限制到220,原来288,超出的就隐藏 )
      max-width: 220px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .container li:nth-of-type(even) span:nth-of-type(1) {
      background-position: -50px -50px;
      color: #9195ab;
    }

    .container li:nth-of-type(3) span:nth-of-type(1) {
      background-position: -50px -10px;
    }

    .container li:nth-of-type(5) span:nth-of-type(1) {
      background-position: -10px -50px;
    } */
    /*  以上是有明确span标签的情况下才生效的 */
    /* 以下是利用伪元素影分身选择器E::before,不用span空标签,直接可以在li后加样式 */
/* 但注意,这里也是可以一次性引入全部li::before影分身,因为序号图标每一个li有,因此样式也不用重复写 */

.container li span:nth-of-type(1) {    
      display: inline-block;         /* 首先这段不能少,原来的.container li span这里给span设置总样式这段也不能少, 一起补进去*/
      vertical-align: middle;        
     font-size: 14px;
      line-height: 20px;    
 
      /* 处理超长标题的方法:给每个li下的第1个span即每行的标题,
       最大宽度限制到220,原来288,超出的就隐藏 */                     
      max-width: 220px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      
    }

 .container li:before {  /* 进入正题,先一次性引入全部li前面图标相同的样式,顺便能把第一个一起引入了,后面第二个开始再覆盖掉即可,也可以不用 */
   content: "";        
   display: inline-block;
   width: 20px;  
   height: 20px;  
   line-height: 20px;/* 要设置20px等于自身height,这样垂直和水平都居中了 */
   margin-right:8px;
   font-size: 12px;
   color: red;
   text-align: center;
   background: url(img/top_rank.png) no-repeat 0 0;
   vertical-align: middle;
 } 

 .container li[rank*="rank_1"]:before { 
  content: "1";  
  background-position:-10px -10px;
 }
 .container li[rank*="rank_2"]:before { 
  content: "2";  
  background-position:-10px -50px;
 }
 .container li[rank*="rank_3"]:before { 
  content: "3";  
  background-position:-50px -10px;
 }
 .container li[rank*="rank_4"]:before { 
  content: "4";  
  background-position:-50px -50px;
 }
 .container li[rank*="rank_5"]:before { 
  content: "5";  
  background-position:-50px -50px;
 }
 .container li[rank*="rank_6"]:before { 
  content: "6";  
  background-position:-50px -50px;
 }

 
 /* .container li span:nth-of-type(3)[icon] {     
      width: 16px;
      height: 16px;
      margin-left: 4px;
      background: url(img/top_icon.png) no-repeat -10px -10px;
    }

    .container li span:nth-of-type(3)[icon$='hot'] {
      background-position: -10px -10px;
    }

    .container li span:nth-of-type(3)[icon$='new'] {
      background-position: -46px -10px;
    } */
/* 以上是有明确span标签的情况下才生效的 */
/* 以下是利用伪元素影分身选择器E::after,不用span空标签,直接可以在li后加样式 */
/* 但注意,这里不能一次性引入全部li::after影分身,因为这个图标就第1和第3个li有,因此样式都要重复写 */

    .container ul li[icon$='hot']:after { /* 属性名结尾为hot的li标签li后面加伪元素影分身选择器, */
      content: "";
      display: inline-block;
      vertical-align: middle;
      line-height: 20px;
      width: 16px;
      height: 16px;
      margin-left: 4px;
      background: url(img/top_icon.png) no-repeat -10px -10px;
    }

    
    .container ul li[icon$='new']:after { /* 属性名结尾为new的li标签后面加伪元素影分身选择器, */
      content: "";
      display: inline-block;
      vertical-align: middle;
      line-height: 20px;
      width: 16px;
      height: 16px;
      margin-left: 4px;
      background: url(img/top_icon.png) no-repeat -46px -10px;
    }

  </style>
</head>

<body>
  <div class="container">
    <ul>
      <li  rank="rank_1"  icon=" icon-hot">
        <a href="#"><span>北京严格出京管理并不意味北京严格出京管理并不意味北京严格出京管理并不意味</span></a>
      </li>
      <li rank="rank_4">
        <a href="#"><span>张若昀涉1.4亿违约纠纷</span></a>
      </li>
      <li rank="rank_2" icon="icon-new">
        <a href="#"><span>唐禹哲承认恋情</span></a>
      </li>
      <li rank="rank_5">
        <a href="#"><span>弗洛伊德弟弟向联合国喊话</span></a>
      </li>
      <li rank="rank_3">
        <a href="#"><span>北京一餐馆7人确诊新冠肺炎</span></a>
      </li>
      <li rank="rank_6">
        <a href="#"><span>日本仙台上空出现白色不明球体</span></a>
      </li>
    </ul>
  </div>
</body>

</html>

四.属性选择器(类似查找替换，精准点击超级重点!!!)

1.选择标签内某些特殊属性的选择器我们都称为属性选择器：
（注意：最终不是给标签属性样式，最终还是给标签样式啊，只是利用属性去最终查找到我们需要的标签而已。）
2.书写规范：规定后面的查找的值都必须加引号（不管数字还是字母），否则不生效。

3.作用：（包括class和id属性之外的任何标签属性都行，如href/ alt / src/自定义属性名如icon都行，通过查找标签内属性所含有的内容从而精准军定位匹配到我们想要的标签而已）

/* 获取到 拥有 该属性的元素 */
div[class^='font'] { /* 查找div中类名属性class^=font   类名开头为font的div标签 */
    color: pink;
}
div[class$='footer'] { /* 查找div中类名属性class$=footer  类名结尾为footer的div标签  */
    color: skyblue;
}
div[class*='tao'] { /* 查找div中类名属性class*=tao   类名只要包含tao的div标签 */
    color: green;
}

<div class="font12">属性选择器</div>
    <div class="font12">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="24font">属性选择器123</div>
    <div class="sub-footer">属性选择器footer</div>
    <div class="jd-footer">属性选择器footer</div>
    <div class="news-tao-nav">属性选择器</div>
    <div class="news-tao-header">属性选择器</div>
    <div class="tao-header">属性选择器</div>
</div>

3.属性选择器具体应用：
比如下面：你要一次性选中fz14 fz24 和 fz34 类名的p标签，以前需要并集选择器 .fz14, .fz24 , . fz34{}这样选中不美观
但是现在可以利用:属性选择器去一次性查找，p[class$=‘4’]{} class类名以4结尾的全部p标签都能选中.(完美)


  <style>
    * {
      margin: 0;
      padding: 0;
    }

    a {
      display: block;
    }

    /* a[target] {
      color: red;         a中只要有target属性的a标签都能选上。
    } */

    a[href^='http'] {
      /*href属性值以http这4个字符开头的a标签 |=*/
      color: black;
    }

    a[target*='an'] {
      /*target属性值包含an这两个字符的a标签  ~=*/
      color: red;
    }

    a[target$='f'] {
      /* target属性值以f这个字符结尾的a标签*/
      color: green;
    }

    p[class$='4'] {
      color: yellowgreen;
    }

    a[target='_self'] {
      color: orange;
    }
  </style>
</head>

<body>
  <a href="http://www.baidu.com/">百度一下</a>
  <a href="#" target="_blank">跳转其他页面</a>
  <a href="#" id="only">我是a标签</a>
  <a href="#" class="link" target="_self">我是a标签 不新开页面跳转</a>
  <a href="#" title="我是哈哈哈哈哈哈">我是a标签</a>

  
   
  <p class="fz14">我是p 我的fz是14</p>
  <p class="fz22">我是p 我的fz是22</p>
  <p class="fz12">我是p 我的fz是12</p>
  <p class="fz24">我是p 我的fz是24</p>
  <p class="fz34">我是p 我的fz是34</p>
  <p class="fz12">我是p 我的fz是12</p>

</body>

</html>
<!-- 
  title属性 提示文本
 
 -->

五.非,常用的复合选择器(实际开发很少用,局限性很高)

element+element : 选择器用于选择（不是内部）指定的第一个元素之后紧跟的元素。

element1~element2: 选择器匹配出现在 element1 后面的 element2。

element1 和 element2 这两种元素必须具有相同的父元素，但 element2 不必紧跟在 element1 的后面。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>不常用的复合选择器</title>
  <style>
    h3 {
      font-size: 20px;
    }

     .title+.des {
      color: #368;         /*第一张图*/
    } 

     h3~.des {            /*第二张图*/
      color: red;
    } 
  </style>
</head>

<body>
  <div>
    <p class="des">作者：元稹</p>
    <h3 class='title'>闻乐天授江州司马_百度汉语</h3>
    <p class="des">作者：元稹</p>
    <p class="des">残灯无焰影幢幢，此夕闻君谪九江。</p>
    <p class="desc"> 垂死病中惊坐起，暗风吹雨入寒窗。</p>

    <div>
      <p class="des"> 垂死病中惊坐起，暗风吹雨入寒窗。</p>
    </div>
  </div>
  <p class="des"> 垂死病中惊坐起，暗风吹雨入寒窗。</p>
</body>

</html>

element1+element2 ( .title+.des)
紧跟在element1后面的第一个element2才会生效. 第二个开始无效.(element1自身不生效)
element1~element2 ( h3~.des)
①跟在element1后面的所有element2都生效(element1自身不生效)
②但必须是跟在element1后面的,写在之前的element2不行,
③且 element1和element2必须是同一个父级下的才生效,比如上面的第二个div盒子的element2已经不是 element1的同一父级了,因此即使标签类名一样也无法生效

六.CSS精灵技术（sprite）小妖精雪碧

1.精灵技术产生的背景

在这里插入图片描述

图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。

2.精灵技术本质:

①简单地说，CSS精灵是一种处理网页背景图像的方式。(多张图片集合到一张图片,减少服务器请求)

②它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图（雪碧图），如下图所示为京东网站中的一个精灵图。

在这里插入图片描述

3.精灵技术的使用:

①CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），
②然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。

在这里插入图片描述

第一步:先准备好一张张小图:



.bg-tp1 {
    width: 20px; height: 20px;
    background: url('css_sprites.png') -10px -10px;
}


.bg-tp2 {
    width: 20px; height: 20px;
    background: url('css_sprites.png') -50px -10px;
}


.bg-tp3 {
    width: 20px; height: 20px;
    background: url('css_sprites.png') -10px -50px;
}


.bg-tp4 {
    width: 20px; height: 20px;
    background: url('css_sprites.png') -50px -50px;
}

第二步:制作精灵图

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），那我们要做的，就是把一张张小图拼合成一张大图。大部分情况下，精灵图都是网页美工做，不过前端也要自食其力不要过度依赖美工。

精灵图注意事项:
1.我们精灵图上放的都是小的装饰性质的背景图片。 插入图片不能往上放。
2.我们精灵图的宽度取决于最宽的那个背景。 
3.我们可以横向摆放也可以纵向摆放，但是每个图片之间，间隔至少隔开偶数像素合适。
4.在我们精灵图的最低端，留一片空隙，方便我们以后添加其他精灵图。

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

精灵图移动特点:往左和上:
背景大于盒子时,以背景左上角作为坐标轴原点,得往左和往上即position x y为负值才能看到背景除盒子面积以外的部分.
(因为正常都是盒子包含大于背景,因此都是往右和下移动来调整个背景图片)

举例:如上图的H要到左上角的第一个盒子中展示该如何移动溢出的背景图片呢? (盒子大小和局部字母背景图一样大)

第一:先X轴往左: background-position-x: -205px; 背景大于盒子时,要往左和上调整,所以position都为负值
(具体移动多少可以截图工具量背景图片内部的字母之间的XY轴距离,没精准的话还可以去浏览器自己微调position值)

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

第二步: 再Y轴往上: background-position-y: -130px;即可

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

最终结果H Y都移动到了:源代码在下面,自己看明白哦,看不懂海牙老师第十四天看看

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>精灵图</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    span {
      display: inline-block;
      width: 220px;
      height: 220px;
      background: blue url(img/letter.png) no-repeat center/400% 400%;
    }

    span:nth-of-type(1) {
      background-position-x: -205px; /*背景大于盒子时,要往左和上调整,所以position都为负值*/
      background-position-y: -130px;
    }

    span:nth-of-type(2) {
      background-position-x: -360px;
      background-position-y: -550px;
    }
  </style>
</head>

<body>
  <span></span><span></span>

</body>

</html>

(特别注意:盒子大小一般和背景精灵图片内部里面单个字母图片宽高是一致,如果不一致比如盒子比单个字母图片大,则background-position-x:/y 移动完单个字母图片到盒子之后之后,还要把背景字母图片的尺寸进行放大,一般是原来的300%到400%浏览器自己调整. background: blue url(img/letter.png) no-repeat center/400% 400%(不能写cover和100%因为是要局部那个字母放大,而不是全图涂满)😉

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

##结构伪类选择器案例:搜索栏讲解:

##(PS:span小盒子要和精灵图的每个小图片宽高大致一样,可以去浏览器调.这样方便特好移动!!!)

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>热搜排行榜</title>
  <link rel="stylesheet" href="index.css">

</head>

<body>
  <ul class="wrapper">
    <li>
      <!-- 因为点击前后两个图标都能是点进连接里的,因此判断a标签是嵌套span图标的 -->
      <a href="#"> <span>1</span><span>高福称北京疫情可能要前推一个月</span> <span icon="icon_hot"></span></a>
    </li>
    <li>
      <a href="#"><span>4</span><span>白百何放否认新恋情</span></a>
    </li>
    <li>
      <a href="#"><span>2</span><span>北京新发地市场商户回浙江后确诊</span><span icon="icon_new"></span></a>
    </li>
    <li>
      <a href="#"><span>5</span><span>男童在确诊患者被子上完感染</span></a>
    </li>
    <li>
      <a href="#"><span>3</span><span>涉事教师承认曾掌掴坠楼小学生</span></a>
    </li>
    <li>
      <a href="#"><span>6</span><span>110万买奔驰越野车高速熄火5次</span></a>
    </li>
  </ul>

</body>

</html>

* {
  padding: 0px;
  margin:  0px;
}

.wrapper {
  width: 700px;
  padding: 20px 100px 60px;
  border: 1px dashed red;
  margin: 100px auto;
  list-style: none;
}


.wrapper  li {
  display: inline-block;
  line-height:40px; /*line-height也可以用 增加上下段距 */
  width: 270px; /* 设置宽度然后,第三条会挤不下ul盒子总宽度,退到下一行 */
  margin-right: 70px;
}


a {
  font-size: 14px;
  color: #242525;
  text-decoration: none;
}
a:hover {
  color: blue;
}
a:active {
  color: red;
}



.wrapper li span {
  display:inline-block;
  line-height: 20px;      /* 这里很重要!!! 行高20px必须等于下面盒子高度20px,代表字体可以垂直居中,
                            否则插入背景图之后背景图是相对文字是不会变的,图文是分离的,因此如果行高设置比20高了文字就会在背景图下面,
                            低了文字就会在背景图上面.这样就不会图文就不会一致,很 */

  vertical-align: middle; /* 给图标和文字都一次性设置好了vertical-align:middle
                             让图片和文本在同一条中线上两两对齐 */
 
  
} 

.wrapper li span:nth-of-type(1) {     /* ul下的全部li的下的第一个span，一次性给li下的第一个span都引入精灵图即可，顺便引出第一张小图的位置 */
  width: 20px;
  height: 20px;
  margin-right:8px;
  background: url(img/top_rank.png) no-repeat -10px -10px; /*往左和往上*/
  text-align: center;
  color: white;
  font-size: 12px;
  
  
}

.wrapper li:nth-of-type(even) span:nth-of-type(1){   /*ul下的偶数li下的第一个span */
   background-position:-50px -50px;               /*上面已经一次性引入精灵图了，因此这里不用重复引用图，这里只要调整位置到你想要的第二张图片 */
   color: #9da1ad;
}  

 

.wrapper li:nth-of-type(3) span:nth-of-type(1){  /* ul下的第三个li下的第一个span */
  background-position:-50px -10px;
  
} 


.wrapper li:nth-of-type(5) span:nth-of-type(1){   /* ul下的第五个li下的第一个span */
  background-position:-10px -50px;
 
} 
 
.wrapper li span:nth-of-type(3)[icon] {  /* ul下的所有li下的第三个span ，一次性给li下的第三个span都引入精灵图即可，顺便引出第一张小图的位置  */
  width: 16px;                               /* 细品，当图标不固定时，使用属性选择器可以不写死,在html内转移icon的属性名到想要li的第三个span即可灵活转移 */
  height: 16px;
  margin-left:4px;
  background: url(img/top_icon.png) no-repeat -10px -10px;
}

.wrapper li span:nth-of-type(3)[icon*='icon_hot'] { /* ul下的全部li下的第三个（span标签属性名为icon并且包含icon_hot的span标签） */
  background-position:-10px -10px;
}

.wrapper li span:nth-of-type(3)[icon*='icon_new'] {    /*ul下的全部li下的第三个（span标签属性名为icon并且包含icon_new的span标签） */
  background-position: -46px -10px;
}

重点代码:
在这里插入图片描述

30px,越来越往下

在这里插入图片描述
10px

关于背景精灵图的缩放:使用boxing-sizing属性.

(可以理解为图片的放大缩小,不会溢出盒子,只会在盒子内部放大,因此不要和图片img设置宽高混淆)

1.语法：

background-size : width height;

单位 : px | % | cover|contain

length	设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个px值，第二个是自动设置为 auto
percentage	将计算相对于背景定位在盒子区域的百分比(100%等于铺满父级盒子)。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover	此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。(适合整个页面)
contain	此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。(前提得有块盒子,否则失效)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x60jiHlA-1620063559539)(C:\Users\tuyue\AppData\Local\Temp\1613745829778.png)]
2.案例:
精灵图上面是:总宽是208px,然后对应图标是82px

因此:如果PSD切图要求是宽43px,则对应需要设置box-sizing为: 原图标宽82 / 精灵图整体宽208 = 规定图标宽43 / X
即可,得出X,让精灵图宽去对应按规定宽度跟着按比例也放大或者缩小一部分.

上面x宽度的计算出来后,直接写宽度即可,让高度会自动auto自适应的

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

3.但是还要注意之后的移动也会发生随之变化,精灵图缩小或者放大以后,对应background-position移动XY的也会发生
变化,如上案例整个精灵图都缩小了,则background-position Y移动自然也会跟着缩小,不用移那么多了,原来是260px.现在只要写127即可.是在不行,可以先-1px,然后自己去浏览器慢慢调

AKA俄语人Лев

关注

0
点赞
踩
0
收藏
打赏
2
评论
自学前端第十五天:伪类伪元素和属性选择器和精灵图

#一.基础伪类选择器(也是交集选择器一种,优先级也要叠加)1.概念:某个选择器的镜像,当光标移动到盒子时会触发新的一面不同的效果,但是是短暂的而已2.作用:伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果。3.优先级权重:伪类分值和类名选择器一样是0,0,1,0分的,因此a:hover 叠加= 0,0,1,1(很重要!!!)4.伪类语法结构:① 类选择器是一个点比如 .demo {} ②而我们的伪类用冒号比如类 :link{} a { /* a
复制链接

扫一扫