#今日说码栏目# 第九集

房东的_猪

已于 2022-07-17 17:28:03 修改

阅读量133

点赞数 1

文章标签： css css3 前端

于 2022-07-15 22:36:27 首次发布

本文链接：https://blog.csdn.net/abner_/article/details/125813504

版权

1、伪类选择器

(伪类：指的是一个不存在的类，特殊的类，例如：伪类可能是第一个元素、被点击的元素，、鼠标移入的元素等等)

1、(以所有元素作为分母，是在所有的元素(包括同类型和不同类型的元素)自身作为分子进行排序)

①、:first-child 第一个子元素

②、:last-child 最后一个子元素

③、:nth-child( x)选中第n个子元素

特殊值： x 在这个括号里的值

如果要选中偶数个的元素，括号填上(2n或者even)

如果要选中奇数的元素，括号填上(2n+1或者odd)

2、(以下伪类的分母相同的元素，以相同的元素作为分母，在同类型的子元素(只限于同类型的元素)中进行排序)

①、:first-of-type 第一个子元素

②、:last-of-type 最后一个子元素

③、:nth-of-type() 选中第n个子元素

两者能实现的功能是相似的。

3、否定伪类

语法： :not( 筛选条件)

功能是：将符合条件的元素从选择器中去除

以下将举例实例代码：

需求一：将ul里的第一个li一直设置为红色

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			/* 需求一：将ul里的第一个li一直设置为红色 */
			li:first-of-type {
				color: red;
			}
		</style>
	</head>
	<body>
		<h1>沁园春·雪</h1>
		<h3>毛泽东</h3>
		<ul>
			<span>测试</span>
			<li class="l1">望长城内外，惟余莽莽；大河上下，顿失滔滔。</li>
			<li>北国风光，千里冰封，万里雪飘。</li>
			<li>山舞银蛇，原驰蜡象，欲与天公试比高。</li>
			<li>须晴日，看红装素裹，分外妖娆。</li>
			<li>江山如此多娇，引无数英雄竞折腰。</li>
			<li>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</li>
			<li>一代天骄，成吉思汗，只识弯弓射大雕。</li>
		</ul>
	</body>
</html>

效果如下：

需求二：将ul里的最后一个元素一直设置为橙色

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			li:last-of-type {
				color: orange;
			}
			/* 需求二：将ul里的最后一个元素一直设置为橙色*/
		</style>
	</head>
	<body>
		<h1>沁园春·雪</h1>
		<h3>毛泽东</h3>
		<ul>
			<span>测试</span>
			<li class="l1">望长城内外，惟余莽莽；大河上下，顿失滔滔。</li>
			<li>北国风光，千里冰封，万里雪飘。</li>
			<li>山舞银蛇，原驰蜡象，欲与天公试比高。</li>
			<li>须晴日，看红装素裹，分外妖娆。</li>
			<li>江山如此多娇，引无数英雄竞折腰。</li>
			<li>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</li>
			<li>一代天骄，成吉思汗，只识弯弓射大雕。</li>
		</ul>
	</body>
</html>

效果如下：

需求三：将ul里的偶数个元素设置为黄色

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			需求三：将ul里的偶数元素一直设置为黄色
			li:nth-of-type(2n) {
				color: yellow;
			}
		</style>
	</head>
	<body>
		<h1>沁园春·雪</h1>
		<h3>毛泽东</h3>
		<ul>
			<span>测试</span>
			<li class="l1">望长城内外，惟余莽莽；大河上下，顿失滔滔。</li>
			<li>北国风光，千里冰封，万里雪飘。</li>
			<li>山舞银蛇，原驰蜡象，欲与天公试比高。</li>
			<li>须晴日，看红装素裹，分外妖娆。</li>
			<li>江山如此多娇，引无数英雄竞折腰。</li>
			<li>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</li>
			<li>一代天骄，成吉思汗，只识弯弓射大雕。</li>
		</ul>
	</body>
</html>

效果如下：

需求四：除了第三个li元素，其他全部设置为紫色

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
         /* 需求四：除了第三个li元素，其他全部设置为紫色*/
			li:not(.l3) {
				color: rgb(137, 59, 246);
			} 
		</style>
	</head>
	<body>
		<h1>沁园春·雪</h1>
		<h3>毛泽东</h3>
		<ul>
			<span>测试</span>
			<li class="l1">望长城内外，惟余莽莽；大河上下，顿失滔滔。</li>
			<li>北国风光，千里冰封，万里雪飘。</li>
			<li class="l3">山舞银蛇，原驰蜡象，欲与天公试比高。</li>
			<li>须晴日，看红装素裹，分外妖娆。</li>
			<li>江山如此多娇，引无数英雄竞折腰。</li>
			<li>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</li>
			<li>一代天骄，成吉思汗，只识弯弓射大雕。</li>
		</ul>
	</body>
</html>

效果如下：

二、a元素的伪类

需求一：给未访问过的超链接加红色字体

1、:link 用来表示未访问过的链接(正常链接)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 需求一：给未访问过的超链接加红色字体 */
      /*1、:link用来表示未访问过的链接（正常链接）*/
      a:link{
        text-decoration: none;
        color: red;
      }
    </style>
  </head>
  <body>
    <a href="https://www.baidu.com">百度一下</a>
  </body>
</html>

效果如下：

需求二：给访问过的超链接加绿色字体

2、:visited 用来表示访问过的链接

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			/* 需求二：给访问过的超链接加绿色字体 */
			/*2、:visited 用来表示访问过的链接
			 由于隐私的原因，所以visited只能改颜色 */
			a:visited{
			  color: rgb(97, 188, 6);
			}
		</style>
	</head>
	<body>
		<a href="https://www.baidu.com/a">百度一下</a>
	</body>
</html>

效果如下：

需求三：鼠标移入，链接字体变大到30px

3、:hover 用来表示鼠标移入的状态

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			a:hover{
			font-size: 30px;
			}
		</style>
	</head>
	<body>
		<a href="https://www.baidu.com">百度一下</a>
	</body>
</html>

效果如下：

需求四：鼠标点击后，增加背景色pink

4、:active 鼠标点击后的状态

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			/* 需求四：鼠标点击后，增加背景色pink */
			/* 4、:active  鼠标点击后的状态 */
			a:active{
			  color: fuchsia;
			}  
		</style>
	</head>
	<body>
		<a href="https://www.baidu.com">百度一下</a>
	</body>
</html>

效果如下：

当这四个超链接联合使用的时候，应当按照 a:link{}、a:visited{}、a:hover{}、a:active{}的顺序

错误的顺序可能会导致超链接的顺序失效

三、伪类选择器

需求一：让文章的首字母一直为字体为40px

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 需求一：让文章的首字母一直为字体为40px */
               p::first-letter{
                font-size: 40px;
               }
    </style>
  </head>
  <body>
    <q>hello</q>
    <p>Apiditate, tempora omnis impedit deleniti, iure fuga illo</p>
  </body>
</html>

效果如下：

需求二：让文章的第一行添加背景色黄色

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 需求二：让文章的第一行添加背景色黄色 */
               p::first-line{
                background-color:yellow ;
               }
    </style>
  </head>
  <body>
    <q>hello</q>
    <p>Apiditate, tempora omnis impedit deleniti, iure fuga illo</p>
  </body>
</html>

效果如下：

需求三：让选中的内容，字体为红色

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 需求三：让选中的内容，字体为红色 */
               p::selection{
                color:red;
               }
    </style>
  </head>
  <body>
    <q>hello</q>
    <p>Apiditate, tempora omnis impedit deleniti, iure fuga illo</p>
  </body>
</html>

效果如下：

需求四：在元素开始的位置前+'abc'

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
  
      /* 需求四：在元素开始的位置前+'abc' */

               before和after必须要结合content使用 */
               
               p::before{
                content: "abc"
               }
    </style>
  </head>
  <body>
    <q>hello</q>
    <p>Apiditate, tempora omnis impedit deleniti, iure fuga illo</p>
  </body>
</html>

效果如下图所示：