【CSS3】第4章 CSS3选择器

学习目标

  • 熟悉属性选择器的用法，了解不同属性选择器的功能。

  • 掌握关系选择器的用法，能够使用关系选择器选取父标签中嵌套的子标签。

  • 掌握结构化伪类选择器的用法，能够使用不同功能的结构化伪类选择器精准控制标签样式。

  • 掌握状态化伪类选择器的用法，能够使用状态化伪类选择器设置导航显示样式。

  • 掌握伪元素选择器的用法，能够使用伪元素选择器为标签添加内容样式。

选择器是CSS3中一个重要的内容，在上一章中已经介绍过一些常用的选择器，但在CSS3中还有一些选择器，使用这些选择器可以大幅度提高设计者书写和修改样式表的效率。本章将详细介绍CSS3中其他类型的选择器。

4.1 属性选择器

属性选择器可以根据标签的属性及属性值来选择对应标签，从而为标签设置差异化的CSS样式。在CSS中有多种属性选择器。例如，E[attribute]选择器、E[attribute =value]选择器、E[attribute ~=value]选择器等。本节将对属性选择器进行详细讲解。

4.1.1 E[attribute]选择器

E[attribute]选择器用于选取标签名称为E（代指标签名称），并且定义了attribute（代指属性名称）属性的标签。其中，E可以省略，如果省略则表示可以匹配满足条件的任意标签。

例如：选取包含id属性的<div>标签: div[id]

<!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>E[attribute]选择器</title><style>[id]{font-size:36px;color:#f00;}</style>
</head>
<body><p id="one">啊，朋友！</p><h2 id="two">黄河以它英雄的气魄，</h2><p class="two">出现在亚洲的原野。</p>
</body>
</html>

4.1.2 E[attribute=value]选择器

E[attribute=value]选择器用于选取标签名称为E（代指标签名称），并且定义了attribute（代指属性名称）属性和value（代指属性值字符）属性值的标签，E也可以省略。

例如：选取包含align属性，属性值为center的全部标签: [align=center]

<!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>E[attribute=value]选择器</title><style>[align=center]{font-size:36px;     }</style>
</head>
<body><p align="center">得道者多助，失道者寡助。</p><p align="center">寡助之至，亲戚畔之；</p><p align="right">多助之至，天下顺之。</p>
</body>
</html>

4.1.3 E[attribute~=value]选择器

E[attribute~=value]选择器用于选取标签名称为E（代指标签名称），并且定义了attribute（代指属性名称）属性，包含某个value（代指属性值字符）属性值的标签。

E[attribute~=value]选择器和E[attribute=value]选择器的区别:

<!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>E[attribute~=value]选择器</title><style>[class~=a]{font-size:36px;color:green;}</style>
</head>
<body><p class="a">《赤  壁》</p><p class="a b">杜牧</p><p class="a-b">折戟沉沙铁未销，自将磨洗认前朝。东风不与周郎便，铜雀春深锁二乔。</p>
</body></html>

4.1.4 E[attribute|=value]选择器

E[attribute|=value]选择器能够选取带有value属性值或以value-开头的属性值的标签。

例如：选取属性值为a或属性值以a-开头的标签

4.1.5 E[attribute^=value]选择器

E[attribute^=value]选择器用于选择标签名称为E（代指标签名称），并且定义了attribute（代指属性名称）属性，属性值前缀为value（代指属性值字符）字符的标签。

例如：选取包含id属性，且id属性值是以“section”字符串开头的<div>标签: div[id^=section]

<!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>E[attribute^=value]选择器</title><style type="text/css">p[id^="one"]{color:pink;font-family:"微软雅黑";font-size:20px;}</style>
</head>
<body><p id="one">山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。</p><p id="two">苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。</p><p id="one1">可以调素琴，阅金经。无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。</p><p id="two1">孔子云：何陋之有？</p>
</body>
</html>

4.1.6 E[attribute$=value]选择器

E[attribute$=value]选择器用于选择属性值后缀为value（代指属性值字符）字符的标签。

例如：选取包含id属性，且id属性值是以“section”字符串结尾的<div>标签: div[id$=section]

<!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>E[attribute$=value]选择器</title><style type="text/css">p[id$="main"]{color:#0cf;font-family: "宋体";font-size:32px;}</style>
</head>
<body><p id="old1">水陆草木之花，可爱者甚蕃。</p><p id="old2">晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。</p><p id="oldmain">予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，</p><p id="newmain">可远观而不可亵玩焉。</p>
</body>
</html>

4.1.7 E[attribute*=value]选择器

E[attribute*=value]选择器用于选择属性值包含value（代指属性值字符）字符的标签。

例如：选取包含id属性，且id属性值包含“section”字符的<div>标签: div[id*=section]

<!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>E[attribute*=value]选择器</title><style type="text/css">p[id*="de"]{color:#0ca;font-family: "宋体";font-size:20px;}</style>
</head>
<body><p id="demo1">予谓菊，花之隐逸者也；</p><p id="main1">牡丹，花之富贵者也；</p><p id="newdemo">莲，花之君子者也。</p><p id="olddemo">噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣。</p>
</body>
</html>

4.2 关系选择器

关系选择器和第3章的复合选择器类似，但关系选择器可以更精确地控制标签样式。CSS3中的关系选择器主要包括子元素选择器和兄弟选择器，本节将详细讲解这两种关系选择器。

4.2.1 子元素选择器

子元素选择器主要用来选择父级标签的子标签，由符号“>”连接标签名称。

例如：选取<h1>标签中的子标签<strong>标签: h1>strong

<!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>子元素选择器</title><style type="text/css">h2>strong{color:red;font-size:20px;font-family:"微软雅黑";}</style>
</head>
<body><h2>前不见<strong>古人</strong>，后不见<strong>来者</strong>。</h2><h2>念天地之悠悠，<em><strong>独怆</strong></em>然而涕下。</h2>
</body>
</html>

4.2.2 兄弟选择器

兄弟选择器可以选择位于同一个父标签中，指定标签后面，具有并列关系的子标签。在CSS3中，兄弟选择器分为邻近兄弟选择器和普通兄弟选择器两种。

<!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>邻近兄弟选择器</title><style type="text/css">p+h2{color:green;font-family:"宋体";font-size:20px;}</style>
</head>
<body><h2>《赠汪伦》</h2><p>李白乘舟将欲行，</p><h2>忽闻岸上踏歌声。</h2><h2>桃花潭水深千尺，</h2><h2>不及汪伦送我情。</h2>
</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>普通兄弟选择器</title><style type="text/css">p~h2{color:pink;font-family:"微软雅黑";font-size:20px;}</style>
</head>
<body><h2>《断章》</h2><p>你站在桥上看风景</p><h2>看风景的人在楼上看你</h2><h2>明月装饰了你的窗子</h2><h2>你装饰了别人的梦</h2>
</body>
</html>

4.3 结构化伪类选择器

结构化伪类选择器可以根据HTML文档结构选择对应的标签，直接设置样式。在CSS3中增加了许多新的结构化伪类选择器，方便网页设计师精准的控制元素样式。常用的结构化伪类选择器有:root选择器、:not选择器、:only-child选择器、:first-child选择器、:last-child选择器等。本节将对这些常用的结构化伪类选择器做具体介绍。

4.3.1 :root选择器

:root选择器用于匹配文档根标签，在HTML中，根标签指的<html>标签。因此使用:root选择器定义的样式，对所有页面标签都生效。

<!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>:root选择器</title><style type="text/css">:root{font-size:40px;}h2{font-size:20px;}</style>
</head>
<body><h2>《赠汪伦》</h2><p>李白乘舟将欲行，忽闻岸上踏歌声。桃花潭水深千尺，不及汪伦送我情。</p>
</body>
</html>

4.3.2 :not选择器

:not选择器可以排除设置的标签或属性。例如，h3:not(.one)会选取没有类名.one的<h3>标签。

<!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>:not选择器</title><style type="text/css">p:not(.one){color: orange;font-size: 20px;font-family: "宋体";}</style>
</head>
<body><h3>《约客》</h3>	<p>黄梅时节家家雨，</p> <p class="one">青草池塘处处蛙。</p> <p>有约不来过夜半，</p> <strong>闲敲棋子落灯花。</strong>
</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>:not选择器</title><style type="text/css">:not(p){color: orange;font-size: 20px;font-family: "宋体";}</style>
</head>
<body><h3>《约客》</h3>	<p>黄梅时节家家雨，</p> <p class="one">青草池塘处处蛙。</p> <p>有约不来过夜半，</p> <strong>闲敲棋子落灯花。</strong>
</body>
</html>

4.3.3 :only-child选择器

:only-child选择器用于选取父标签中的唯一子标签，也就是说，如果某个父标签仅有一个子标签，使用:only-child选择器可以选择这个子标签。

<!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>:only-child选择器</title><style type="text/css">strong:only-child{color:red;}</style>
</head>
<body><p><strong>《泊秦淮》</strong><strong>杜牧</strong></p><p><strong>烟笼寒水月笼沙，</strong></p><p><strong>夜泊秦淮近酒家。</strong><strong>商女不知亡国恨，</strong><strong>隔江犹唱后庭花。</strong></p>
</body>
</html>

4.3.4 :first-child选择器和:last-child选择器

:first-child选择器用于选择父标签中的第一个子标签。 :last-child选择器用于选取父标签中的最后一个子标签。

<!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>:first-child选择器和:last-child选择器</title><style type="text/css">p:first-child{color:pink;font-size:16px;font-family:"宋体";	}p:last-child{color:blue;font-size:16px;font-family:"微软雅黑";}</style>
</head>
<body>
<div><p>第一篇 毕业了</p><p>第二篇 关于考试</p><p>第三篇 夏日飞舞</p><p>第四篇 惆怅的心</p><p>第五篇 畅谈美丽</p>
</div>
</body>
</html>

4.3.5 :nth-child(n)选择器和:nth-last-child(n)选择器

使用:first-child选择器和:last-child选择器可以选择父标签中第一个子标签和最后一个子标签，但是如果用户想要选择其他位置的子标签，例如，第2个或倒数第2个子标签，:first-child选择器和:last-child选择器就不起作用了。为此，CSS3引入了:nth-child(n)选择器和:nth-last-child(n)选择器。

:nth-child(n)选择器用于选择父标签中的第n个子标签。 :nth-last-child(n)用于选取父标签中的倒数第n个子标签。

例如：选取父标签中的第2个子标签: :nth-child(2)

<!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>:nth-child(n)选择器和:nth-last-child(n)选择器</title><style type="text/css">p:nth-child(2){color:pink;font-size:16px;font-family:"宋体";}p:nth-last-child(2){color:blue;font-size:16px;font-family:"微软雅黑";}</style>
</head>
<body><div><p>第一篇 毕业了</p><p>第二篇 关于考试</p><p>第三篇 夏日飞舞</p><p>第四篇 惆怅的心</p><p>第五篇 畅谈美丽</p></div>
</body>
</html>

4.3.6 :first-of-type选择器和:last-of-type选择器

:first-of-type选择器用于匹配父标签中第1个特定类型的子标签。 :last-of-type选择器用于匹配父标签中最后1个特定类型的子标签。

<!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>:first-of-type选择器和:last-of-type选择器</title><style type="text/css">h2:last-of-type{color:#f09;}p:first-of-type{color:#12ff65;}</style>
</head>
<body><h2>李白</h2><p>字太白，号青莲居士，唐代伟大的浪漫主义诗人。</p><h2>杜甫</h2><p>字子美，自号少陵野老，唐代伟大的现实主义诗人。</p><h2>孟浩然</h2><p>字浩然，号孟山人，唐代著名的山水田园派诗人。</p><h2>李贺</h2><p>字长吉， 唐朝中期的浪漫主义诗人。</p>
</body>
</html>

4.3.7 :nth-of-type(n)选择器和:nth-last-of-type(n)选择器

:nth-of-type(n)选择器用于匹配父标签中特定类型的第n个子标签。 :nth-last-of-type(n)选择器用于匹配父标签中特定类型的倒数第n个子标签。

<!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>:nth-of-type(n)选择器和:nth-last-of-type(n)选择器</title><style type="text/css">h2:nth-of-type(odd){color:#f09;}h2:nth-of-type(even){color:#12ff65;}p:nth-last-of-type(2){font-weight:bold;}</style>
</head>
<body><h2>李白</h2><p>字太白，号青莲居士，唐代伟大的浪漫主义诗人。</p><h2>杜甫</h2><p>字子美，自号少陵野老，唐代伟大的现实主义诗人。</p><h2>孟浩然</h2><p>字浩然，号孟山人，唐代著名的山水田园派诗人。</p><h2>李贺</h2><p>字长吉， 唐朝中期的浪漫主义诗人。</p>
</body>
</html>

4.3.8 :empty选择器

:empty选择器用来选择没有子标签或内容为空的所有标签。

<!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>:empty选择器</title><style type="text/css">p{width:150px;height:30px;}:empty{background-color: #999;}</style>
</head>
<body><p>草树知春不久归，</p><p>百般红紫斗芳菲。</p><p>杨花榆荚无才思，</p><p></p><p>惟解漫天作雪飞。</p>	
</body>
</html>

4.3.9 :target选择器

:target选择器用于突出显示当前活动的目标元素。只有用户单击页面中的超链接，并且跳转到:target选择器控制的元素后，:target选择器所设置的样式才会起作用。

<!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>:target选择器</title><style type="text/css">:target{background-color:#e5eecc;}</style>
</head>
<body><h1>这是标题</h1><p><a href="#news1">跳转至内容 1</a></p><p><a href="#news2">跳转至内容 2</a></p><p>请单击上面的超链接，:target选择器会突出显示当前活动的HTML锚。</p><p id="news1"><b>内容 1</b></p><p id="news2"><b>内容 2</b></p>
</body>
</html>

4.4 状态化伪类选择器

状态化伪类选择器主要用于在定义超链接时，配合鼠标指针操作，使超链接在单击前、单击后和鼠标指针悬停时显示不同的样式。

在CSS中的4种状态化链接伪类

状态化伪类选择器描述
a:link{ CSS样式; }设置超链接的默认样式。
a:visited{ CSS样式; }设置超链接被访问过之后的样式。
a:hover{ CSS样式; }设置鼠标指针悬停时超链接的样式。
a:active{ CSS样式; }设置鼠标指针单击不动时超链接的样式。
<!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>4种状态化伪类选择器</title><style type="text/css">a:link,a:visited{        color:#000;          /*设置超链接默认和被访问之的后颜色为黑色*/text-decoration:none;  /*取消超链接下画线效果*/}     a:hover{color:#093;               /*设置鼠标指针悬停时超链接颜色为绿色*/text-decoration:underline;  /*设置鼠标悬停时超链接显示下画线*/}    a:active{color:#FC0;}         /*设置鼠标指针单击不动时超链接颜色为黄色*/</style>
</head>
<body><a href="#">公司首页</a><a href="#">公司简介</a><a href="#">产品介绍</a><a href="#">联系我们</a>
</body>
</html>

在实际工作中，通常只需要使用a:link、a:visited和a:hover定义超链接未访问、访问后和鼠标悬停时的显示样式。并且经常对a:link和a:visited应用相同的样式，使未访问和访问后的超链接样式保持一致。

注意：使用超链接的4种状态化伪类选择器时，对排列顺序是有要求的。通常按照a:link、a:visited、a:hover和a:active的顺序书写，否则定义的样式可能不起作用。

4.5 伪元素选择器

伪元素选择器主要用来模拟HTML元素的效果，相当于在HTML元素中创建一个有内容的虚拟容器，在不增加HTML元素结构的情况下，设置对应的样式。本节将重点介绍伪元素选择器常用的:before选择器和:after选择器。

4.5.1 :before选择器

:before选择器用于在被选取标签的前面插入内容。在使用:before选择器时必须配合content属性来指定要插入的具体内容。

:before选择器的基本语法格式:

<!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>:before选择器</title><style type="text/css">p:before{content:"初，权谓吕蒙曰：";color:#c06;font-size:20px;font-family:"微软雅黑";font-weight:bold;}</style>
</head>
<body><p>“卿今当涂掌事，不可不学！”蒙辞以军中多务。权曰：“孤岂欲卿治经为博士邪！但当涉猎，见往事耳。卿言多务，孰若孤？孤常读书，自以为大有所益。”</p>
</body>
</html>

4.5.2 :after选择器

:after选择器用于在被选取元素的后面插入内容。使用方法与:before选择器相同。

<!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>:after选择器</title><style type="text/css">strong:after{content:url(images/1.png);}</style>
</head>
<body><strong>天文学</strong>
</body>
</html>

在CSS3中，规范了伪元素选择器的写法，用两个冒号来表示伪元素。即将:before改写为::before，将:after改写为::after。就目前情况来说:before和:after这种写法兼容性更好，::before和::after这种写法更规范。不过在HTML5和CSS3的页面开发中，建议遵循CSS3的规范要求，使用双冒号的写法表示伪元素选择器。

伪类:在获取某个元素的时候，我们可以通过基础选择器直接获取该元素，但要获取第几个元素时（例如偶数行元素），我们就无法使用常规的CSS选择器获取，此时可是使用伪类来获取想要的元素，例如我们想要获取若干列表项的第一个元素，可以通过“:first-child”来获取到，“:first-child”就是一个伪类。使用伪类可以弥补选择器的不足。

伪元素是依托现有元素，创建一个虚拟元素，我们可以为这个虚拟元素添加内容或样式。

例如：为文本的第一个字母添加<span>标签，并设置样式代码

例如：使用伪元素修改代码，并设置样式

4.6 阶段案例——风云人物列表页面

本章重点讲解了CSS3中一些常用的选择器，为了使读者更好的掌握选择器的使用，本节将通过案例的形式分步骤制作一个风云人物列表页面。

/* 删除浏览器的默认样式 */
*{list-style:none;outline:none;}
/* 全局控制 */
body{font-family:"微软雅黑";text-align:center;}
a{text-indent: 1em;display:inline-block;font-size:22px;color:#5E2D00;
}
a:nth-child(1){text-indent:0;}         /* 设置第一个链接的首行缩进为0 */
a:link,a:visited{text-decoration:none;}
a:hover{text-decoration:underline;color:#f03;
}
dl{display:none;}
dd{line-height:38px;font-size:22px;font-family:"微软雅黑";color:#333;}
dd:before{content:url(images/11.png);} /* 添加小图片 */
dd:nth-child(odd){color:#BDA793;}
dd:nth-child(2) em{color:#f03;font-weight:bold;font-style: normal;}
dd:nth-child(3) em{color:#5E2D00;font-weight:bold;font-style: normal;}
:target{display:block;}/* 链接到的内容部分显示 */
<!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>风云人物</title><link rel="stylesheet" type="text/css" href="style23.css">
</head>
<body>
<h2>风云人物列表(单击查看)</h2>
<hr size="3" color="#5E2D00"  width="750px">
<nav><a href="#news1" class="one">钱学森</a><a href="#news2" class="two">赵九章</a><a href="#news3" class="two">华罗庚</a><a href="#news4" class="two">李四光</a>
</nav>
<hr size="3" color="#5E2D00"  width="750px">
<dl id="news1"><dt><img src="images/1.jpg"></dt><dd>我国空气动力学家，中国科学院、中国工程院院士，<em>我国“两弹一星”功勋奖章获得者之一。</em></dd><dd>为我国的导弹和航天计划做出过重大贡献，被誉为<em>“中国航天之父”和“火箭之王”。</em></dd><dd>我国航天事业的奠基人，受人尊敬的科学家。</dd><dd>在我国的发展和世界和平中发挥着重要作用的伟大科学家。</dd>
</dl>
<dl id="news2"><dt><img src="images/2.jpg"></dt><dd>著名的科学家、气象学家、地球物理学家和空间物理学家，中科院院士。<em>1933年毕业于清华大学物理系，后留校任物理系助教；</em></dd><dd>1944年任中央研究院气象研究所代所长；</dd><dd>1947年任中央研究院气象研究所所长；</dd><dd>1950年任中国科学院地球物理研究所所长；<em>1955年当选为中国科学院学部委员（院士）；</em></dd>
</dl>
<dl id="news3"><dt><img src="images/3.jpg"></dt><dd>中国著名数学家，<em>中国科学院院士。</em></dd><dd>中国解析数论、典型群、矩阵几何学、自守函数论与多元复变函数等方面研究的创始人与奠基者。</dd><dd>中国在世界上<em>最有影响的数学家之一。</em></dd><dd>芝加哥科学技术博物馆中的<em>88位数学伟人之一。</em></dd>
</dl>
<dl id="news4"><dt><img src="images/4.jpg"></dt><dd><em>中国著名地质学家，</em>博士学位。</dd><dd>首创地质力学，中央研究院院士，中国科学院院士。</dd><dd>中国地质力学的创立者，中国现代地球科学和地质工作的主要领导人和奠基人之一。</dd><dd>2009年当选为<em>100位新中国成立以来感动中国人物之一。</em></dd>
</dl>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://xiahunao.cn/news/2660526.html

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

HCIA-Datacom题库（自己整理分类的）——OSPF协议多选

HCIA-Datacom题库（自己整理分类的）——OSPF协议多选

ospf的hello报文功能是 邻居发现 同步路由器的LSDB 更新LSA信息 维持邻居关系 下列关于OSPF区域描述正确的是 在配置OSPF区域正确必须给路由器的loopback接配置IP地址 所有的网络都应在区域0中宣告 骨干区域的编号不能为2 区域的编号范围是从0.0.0.0到255.255.255.255…
阅读更多...
边缘计算网关：在智慧储能系统中做好储能通信管家

边缘计算网关：在智慧储能系统中做好储能通信管家

背景 目前储能系统主要由储能单元和监控与调度管理单元组成&#xff0c;储能单元包含储能电池组(BA)、电池管理系统(BMS)、储能变流器(PCS)等&#xff1b;监控与调度管理单元包括中央控制系统(MGCC)、能量管理系统(EMS)等。 2021年8月&#xff0c;国家发改委发布《电化学储能…
阅读更多...
新版ONENET的物联网环境调节系统（esp32+onenet+微信小程序）

新版ONENET的物联网环境调节系统（esp32+onenet+微信小程序）

新版ONENET的物联网环境调节系统&#xff08;esp32onenet微信小程序&#xff09; 好久没用onenet突然发现它大更新了&#xff0c;现在都是使用新版的物联网开放平台&#xff0c;只有老用户还有老版的多协议接入&#xff0c;新用户是没有的&#xff0c;所以我顺便更新一下新的开…
阅读更多...
大厂前端面试题总结（百度、字节跳动、腾讯、小米.....），附上热乎面试经验！

大厂前端面试题总结（百度、字节跳动、腾讯、小米.....），附上热乎面试经验！

先简单介绍下自己&#xff0c;我“平平无奇小天才”一枚&#xff0c;毕业于南方普通985普通学生&#xff0c;有幸去百度、字节面试&#xff0c;感觉大公司就是不一样&#xff0c;印象最深的是字节&#xff0c;所以有必要总结一下面试经验&#xff0c;以及面试中遇到的一些问题&…
阅读更多...
html-css-js使用axios和ajax获取接口并携带请求头+获取输入框或选择器内容

html-css-js使用axios和ajax获取接口并携带请求头+获取输入框或选择器内容

需求&#xff1a;使用axios或者Ajax获取接口&#xff0c;有些需要获取到输入框&#xff0c;或者选择器内容之后传给接口&#xff0c;也就是写了几种不同请求的方法&#xff0c;网上有很多方法&#xff0c;本文章算是个归纳吧。 一、axios请求传参请求头 1.github下载axios 我…
阅读更多...
智安网络|实现安全与网络功能一体化：SASE的全新安全策略

智安网络|实现安全与网络功能一体化：SASE的全新安全策略

随着企业信息化和数字化程度的不断提升&#xff0c;网络安全面临着前所未有的挑战。传统的网络安全模式已经无法满足日益复杂的安全需求。在这一背景下&#xff0c;安全访问服务边缘&#xff08;SASE&#xff09;崭露头角&#xff0c;并逐渐成为新一代网络安全架构的关键概念。…
阅读更多...
嵌入式开发——ADC开发

嵌入式开发——ADC开发

学习目标 了解ADC开发流程掌握采样方式能够使用ADC进行芯片内部通道进行采样能够使用ADC对外部电路进行采样学习内容 GD32F4的ADC 特点： 16个外部模拟输入通道；1个内部温度传感通道(VSENSE)；1个内部参考电压输入通道(VREFINT)；1个外部监测电池VBAT供电引脚输入通道。ADC开…
阅读更多...
自动化测试与功能测试

自动化测试与功能测试

什么是自动化测试? 自动化测试是指利用软件测试工具自动实现全部或部分测试&#xff0c;它是软件测试的一个重要组成 部分&#xff0c;能完成许多手工测试无法实现或难以实现的测试。能够正确、合理地实施自动测试&#xff0c;可以 快速、全面地对软件进行测试&#xff0c;从…
阅读更多...
JVM篇：JVM内存结构

JVM篇：JVM内存结构

程序计数器 程序计数器英文名叫&#xff1a;Program Counter Register 作用&#xff1a;用来记录下一条jvm指令的地址行号。 先来查看一段jvm指令&#xff0c;这些指令对应的java代码就是输出1-5 操作系统运行该Java程序时具体流程如下 语言解释&#xff1a;源文件通过编译转…
阅读更多...
水果软件2024FL Studio21.3mac苹果中文版

水果软件2024FL Studio21.3mac苹果中文版

FL STUDIO21发布&#xff0c;提供您一直在等待的出色工作流程功能。通过新效果、多个播放列表曲目选择和无所畏惧的撤消一切编辑&#xff0c;将您的音乐带入2024年。FL Studio21中文完整版是一个功能齐全、开放式架构的PC音乐创作和制作环境。它具有基于音乐音序器的图形用户界…
阅读更多...
OFDM——PAPR减小

OFDM——PAPR减小

文章目录 前言一、PAPR 减小二、MATLAB 仿真1、OFDM 信号的 CCDF①、MATLAB 源码②、仿真结果 2、单载波基带/通频带信号的 PAPR①、MATLAB 源码②、仿真结果 3、时域 OFDM 信号和幅度分布①、MATLAB 源码②、仿真结果 4、Chu 序列和 IEEE802.16e 前导的 PAPR①、MATLAB 源码②…
阅读更多...
手撕测试tcp服务器效率工具——以epoll和io_uring对比为例

手撕测试tcp服务器效率工具——以epoll和io_uring对比为例

服务器性能测试介绍 服务器的性能测试主要包括2部分&#xff1a; 并发量。能容纳多大的连接效率。在不崩坏的情况下能对报文的处理效率。 本文主要进行效率测试&#xff0c;看看基于epoll模型和io_uring模型的tcp服务器&#xff0c;谁的效率更高。 测试思路 客户端&#x…
阅读更多...
字节跳动 MapReduce - Spark 平滑迁移实践

字节跳动 MapReduce - Spark 平滑迁移实践

摘要&#xff1a;本文整理自字节跳动基础架构工程师魏中佳在本次 CommunityOverCode Asia 2023 中的《字节跳动 MapReduce - Spark 平滑迁移实践》主题演讲。 随着字节业务的发展&#xff0c;公司内部每天线上约运行 100万 Spark 作业&#xff0c;与之相对比的是&#xff0c;线…
阅读更多...
mac 生成 本地.ssh

mac 生成 本地.ssh

输入下面命令行 ssh-keygen 默认回车得到下面的 Generating public/private rsa key pair. Enter file in which to save the key (/Users/{用户名}/.ssh/id_rsa): Enter passphrase (empty for no passphrase): Enter same passphrase again: Your identification has be…
阅读更多...
中央集成式架构量产时代，openVOC方案将引发软件开发模式变革

中央集成式架构量产时代，openVOC方案将引发软件开发模式变革

2024年&#xff0c;中央计算区域控制架构正式进入规模化量产周期&#xff0c;汽车智能化正式迈入2.0时代&#xff0c;产业生态、应用创新、开发模式都将迎来巨大变革。 同时&#xff0c;随着ChatGPT引发的AIGC领域的爆发式增长&#xff0c;人工智能技术掀起全球万亿级信息化应…
阅读更多...
MySQL进阶之（一）逻辑架构

MySQL进阶之（一）逻辑架构

一、逻辑架构 1.1 逻辑架构剖析1.1.1 连接层1.1.2 服务层01、基础服务组件02、SQL Interface&#xff1a;SQL 接口03、Parser&#xff1a;解析器04、Optimizer&#xff1a;查询优化器05、Caches & Buffers&#xff1a; 查询缓存组件 1.1.3 引擎层1.1.4 存储层1.1.5 总结 1.…
阅读更多...
Android画布Canvas矩阵Matrix放大裁剪Rect区域的Bitmap，Kotlin

Android画布Canvas矩阵Matrix放大裁剪Rect区域的Bitmap，Kotlin

Android画布Canvas矩阵Matrix放大裁剪Rect区域的Bitmap&#xff0c;Kotlin private fun mydraw() {val originBmp BitmapFactory.decodeResource(resources, R.mipmap.pic).copy(Bitmap.Config.ARGB_8888, true)val newBmp Bitmap.createBitmap(originBmp.width, originBmp.h…
阅读更多...
使用Vue3开发学生管理系统模板5 学生家长信息的实现

使用Vue3开发学生管理系统模板5 学生家长信息的实现

字段设计 IDname&#xff1a;姓名&#xff0c;字符串&#xff0c;最长36个字符gender&#xff1a;性别&#xff0c;字符串&#xff0c;最长6个字符串age&#xff1a;年龄&#xff0c;数字类型phone&#xff1a;电话&#xff0c;字符串&#xff0c;最长20个字符student_id&…
阅读更多...
[JS设计模式]Observer Pattern

[JS设计模式]Observer Pattern

使用观察者模式是加强关注点分离(seperation of concerns)和单一职责(single-responsibility)原则的好方法。观察者模式对象和观察者对象没有紧密耦合&#xff0c;并且可以随时(去)耦合。可以将监控事件和处理事件分离。 下面举例来阐述&#xff1a; 首先&#xff0c;定义一个…
阅读更多...
连接GaussDB(DWS)报错：Invalid or unsupported by client SCRAM mechanisms

连接GaussDB(DWS)报错：Invalid or unsupported by client SCRAM mechanisms

用postgres方式连接GaussDB(DWS)报错&#xff1a;Invalid or unsupported by client SCRAM mechanisms 报错内容 [2023-12-27 21:43:35] Invalid or unsupported by client SCRAM mechanisms org.postgresql.util.PSQLException: Invalid or unsupported by client SCRAM mec…
阅读更多...
最新文章

Copyright @ 2022~2023