属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。
1.E[att^=value]属性选择器
E[att^=value]属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含前缀为value的子字符串。需要注意的是E是可以省略的，如果省略则表示可以匹配满足条件的任意元素。
下面通过一个案例对E[att^=value]属性选择器的用法进行演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>E[att^=value]</title>
<style type="text/css">
p[id^="one"]{
color: pink;
font-family: "微软雅黑";
font-size: 20px;
}
</style>
</head>
<body>
<p id="one">
为了看日出，我常常早起。那时天还没有大亮，周围非常清静，船上只有机器的响声。
</p>
<p>
天空还是一片浅蓝，颜色很浅。转眼间天边出现了一道红霞，慢慢地在扩大它的范围，
加强它的亮光。我知道太陽要从天边升起来了，便不转眼地望着那里。
</p>
<p id="one1">
果然过了一会儿，在那个地方出现了太陽的小半边脸，红是真红，却没有亮光。这个太
陽好像负着重荷似地一步一步、慢慢地努力上升，到了最后，终于冲破了 云霞，完全跳
出了海面，颜色红得非常可爱。一刹那间，这个深红的圆东西，忽然发出了夺目的亮光，
射得人眼睛发痛，它旁边的云片也突然有了光彩。
</p>
<p id="two1">
有时太陽走进了云堆中，它的光线却从云里射下来，直射到水面上。这时候要分辨出
哪里是水，哪里是天，倒也不容易，因为我就只看见一片灿烂的亮光。
</p>
</body>
</html>
运行效果如图所示：
2.E[att$=value]属性选择器
E[att$=value]属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含后缀为value的子字符串。E元素可以省略，如果省略则表示可以匹配满足条件的任意元素。
下面通过一个案例对E[att$=value]属性选择器的用法进行演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>E[att$=value]</title> <style type="text/css"> p[id$="main"]{ color: #0cf; font-family: "宋体"; font-size: 20px; } </style> </head> <body> <p id="old1"> 盼望着，盼望着，东风来了，春天的脚步近了。 </p> <p id="old2"> 小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。 坐着，趟着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。 </p> <p id="oldmain"> 桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的 像雪。花里带着甜味儿，闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿！花下成千成百的蜜 蜂嗡嗡地闹着…… </p> <p id="newmain"> “吹面不寒杨柳风”，不错的，像母亲的手抚摸着你。风里带来些新翻的泥土气息，混着青草味儿， 还有各种花的香都在微微润湿的空气里酝酿。鸟儿将窠巢安在繁花嫩叶当中，高兴起来了…… </p> </body> </html>
运行效果如图所示：
3.E[att*=value]属性选择器
E[att*=value]属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含后缀为value的子字符串。E元素可以省略，如果省略则表示可以匹配满足条件的任意元素。
下面通过一个案例对E[att*=value]属性选择器的用法进行演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>E[att*=value]</title> <style type="text/css"> p[id*="demo"]{ color: #0cf; 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>
运行效果如图所示：
关系选择器
1.子代选择器（>）
子代选择器主要用来选择某个元素的第一级子元素。例如希望选择只作为h1元素子元素的strong元素，可以这样写：h1>strong。
下面通过一个案例对子代选择器（>）的用法进行演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>子代选择器的应用</title> <style type="text/css"> h1>strong{ color: red; font-size: 20px; font-family: "微软雅黑"; } </style> </head> <body> <h1>这个<strong>知识点</strong>很<strong>重要</strong></h1> <h1>传智<em><strong>播客</strong></em>欢迎你！</h1> </body> </html>
运行效果如图所示：
2.兄弟选择器（+、~）
兄弟选择器用来选择与某元素位于同一个父元素之中，且位于该元素之后的兄弟元素。
临近兄弟选择器（+）
该选择器适用加号“+”来连接前后两个选择器。选择器中的2个元素有同一个父亲，而且第2个元素是紧跟第1个元素。
下面通过一个案例对临近兄弟选择器的用法进行演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <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> <!--只有紧跟p元素的那个h2元素应用了代码中设定的样式--> <h2>不及汪伦送我情。</h2> </body> </html>
运行效果如图所示：
普通兄弟选择器（~）
普通兄弟选择器使用“~”来链接前后2个选择器。选择器中的2个元素有同一个父亲，但第2个元素不必紧跟第1个元素。
下面通过一个案例对普通兄弟选择器进行演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>临近兄弟选择器的应用</title> <style type="text/css"> p~h2{ color: green; font-family:"宋体"; font-size: 20px; } </style> </head> <body> <p>你站在桥上看风景</p> <h2>看风景的人在楼上看你</h2> <h2>明月装饰了你的窗子</h2> <h2>你装饰了别人的梦</h2> </body> </html>
运行效果如图所示：
结构化伪类选择器
CSS3中新增加的选择器。
1.：root选择器
：root选择器用于匹配文档根元素，在HTML中，根元素始终是HTML元素。也就是说使用“：root选择器”定义的样式，对所有页面元素都生效。对于不需要该样式的元素，可以单独设置样式进行覆盖。
下面通过一个案例对：root选择器的用法进行演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>：root选择器的应用</title> <style type="text/css"> :root{color: red;} h2{color: blue;} </style> </head> <body> <h2>《面朝大海，春暖花开》</h2> <p>从明天起，做个幸福的人；喂马，劈柴，周游世界。从明天起，关心粮食和蔬菜； 我有一所房子，面朝大海，春暖花开。</p> </body> </html>
运行效果如图所示：
如果以上代码中不指定h2元素的字体颜色，而仅仅使用“：root选择器”设置的样式，那么效果变为：
2.：not选择器
如果对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式，可以使用：not选择器。
下面通过一个案例对：not选择器进行演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>：not选择器的应用</title> <style type="text/css"> body *:not(h3){ /*body与*之间一定要有空格，否则无效*/ color: orange; font-size: 20px; font-family: "宋体"; } </style> </head> <body> <h3>《世界上最远的距离》</h3> <p>世界上最远的距离</p> <p>不是生与死的距离</p> <p>而是我站在你面前</p> <p>你却不知道我爱你……</p> </body> </html>
运行效果如图所示：
注意：body与*之间一定要有空格，否则无效。
3.：only-child选择器
：only-child选择器用于匹配属于某元素的唯一子元素的元素，也就是说，如果某个父元素仅有一个子元素，则使用“：only-child选择器”选择这个子元素。
下面通过一个案例对“：only-child选择器”的用法进行演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>：only-child选择器的应用</title> <style type="text/css"> li :only-child{color: red;} </style> </head> <body> <div> 国内电影： <ul> <li>一代宗师</li> <li>叶问</li> <li>非诚勿扰</li> </ul> 漂亮国电影： <ul> <li>侏罗纪世界</li> </ul> 小日子过得不错的本动漫： <ul> <li>蜡笔小新</li> <li>火影忍者</li> <li>航海王</li> </ul> </div> </body> </html>
运行效果如图所示：
效果与实际不符，不知问题出在哪里。
4.：frist-child和：last-child选择器
：frist-child选择器和：last-child选择器分别用于为父元素中的第1个或者最后一个子元素设置样式。
下面通过一个案例来演示它们的使用方法：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>：frist-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> <p>第一篇 毕业了</p> <p>第二篇 关于考试</p> <p>第三篇 夏日飞舞</p> <p>第四篇 惆怅的心</p> <p>第五篇 畅谈美丽</p> </body> </html>
运行效果如图所示：
5.：nth-child(n)和：nth-last-child(n)选择器
使用：nth-child(n)和：nth-last-child(n)选择器可以选择第n个或倒数第n个子元素，与元素类型无关。
下面通过一个案例来演示它们的使用方法：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <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> <p>第一篇 毕业了</p> <p>第二篇 关于考试</p> <p>第三篇 夏日飞舞</p> <p>第四篇 惆怅的心</p> <p>第五篇 畅谈美丽</p> </body> </html>
运行效果如图所示：
6.：nth-of-type（n）和：nth-last-of-type（n）选择器
：nth-of-type（n）和：nth-last-of-type（n）选择器用于匹配属于父元素特定类型的第n个子元素和倒数第n个子元素。
下面通过一个案例对它们的具体用法进行演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>：nth-of-type(n)和nth-last-of-type(n)选择器的应用</title> <style type="text/css"> h2:nth-of-type(odd){color: #f09;} /*只对奇数行起作用*/ h2:nth-last-of-type(even){color: #12ff65;} /*只对偶数行起作用*/ p:nth-last-of-type(2){font-weight: bold;} /*将倒数第2个p元素的字体加粗显示*/ </style> </head> <body> <h2>网页设计</h2> <p>网页设计是根据企业希望向浏览者传递的信息(包括产品、服务、理念、文化)，进行网站功能策划。 然后进行进行的页面设计美化工作。</p> <h2>Java</h2> <p>Java是一种可以撰写跨平台应用程序的面向对象的程序设计语言。</p> <h2>iOS</h2> <p>iOS是由苹果公司开发的移动操作系统。</p> <h2>PHP</h2> <p>PHP(PHP：Hypertext Preprocessoe，超文本预处理器)是一种通用开源脚本语言。</p> </body> </html>
运行效果如图所示：
7.：empty选择器
：empty选择器用来选择没有子元素或文本内容为空的所有元素。
下面通过一个案例对“：empty选择器”的用法进行演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <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>
运行效果如图所示：
8.：target选择器
：target选择器用于为页面中的某个target元素指定样式。只有用户单击了页面中的超链接，并且跳转到target元素后，：target选择器所设置的样式才会起作用。
下面通过一个案例对“：target选择器”进行演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <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><b id="news1">内容1……</b></p> <p><b id="news2">内容2……</b></p> </body> </html>
运行效果如图所示：
伪元素选择器
1.：before选择器
：before伪元素选择器用于在被选元素的内容前面插入内容，必须配合content属性来指定要插入的具体内容。
下面通过一个案例对“：before选择器”进行演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>before选择器的应用</title> <style type="text/css"> p:before{ content: "传播智客"; /*content用来指定具体要插入的内容*/ color: #c06; font-size: 20px; font-family: "微软雅黑"; font-weight: bold; } </style> </head> <body> <p>专注于Java、.NET、PHP、网页设计和平面设计、iOS、c++工程师的培养，提供的免费视频教程是目前 覆盖面最广，项目最真实的视频教程之一。</p> </body> </html>
运行效果如图所示：
2.：after选择器
：after伪元素选择器用于在某个元素之后插入一些内容。
下面通过一个案例对“：after选择器”进行演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>after选择器的应用</title> <style type="text/css"> p:after{content: url(C:/Users/86155/Desktop/网页制作HTML5+CSS3/鸟巢.webp) ;} </style> </head> <body> <p>鸟巢<br></p> </body> </html>
运行效果如图所示：
链接伪类
定义超链接时，为了提高用户体验，网页设计者经常需要为超链接不同的状态指定不同的样式，使得超链接在单击前、单击后和鼠标指针悬停时的样式不同。在CSS3中，通过链接伪类可以实现不同的超链接样式。
所谓伪类并不是真正意义上的类，它的名称是由系统定义的，通常由标记名、类名或id名加“：”构成。
超链接标记<a>的伪类有4种，具体如表所示：
| 超链接标记<a>的伪类 | 含义 |
| a:link{CSS样式规则；} | 未访问时超链接的状态 |
| a:visited{CSS样式规则；} | 访问后超链接的状态 |
| a:hover{CSS样式规则；} | 鼠标指针悬停时超链接的状态 |
| a:active{CSS样式规则；} | 鼠标单击不动时超链接的状态 |
下面通过一个案例来做具体演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>链接伪类</title> <style type="text/css"> a:link,a:visited{ /*未访问时和访问后*/ color: pink; text-decoration: none; /*清除超链接默认的下划线*/ } a:hover{ /*鼠标指针悬停时*/ color: blue; text-decoration: underline; /*鼠标指针悬停时出现下划线*/ } a:active{color: #F00;} /*鼠标单击不动时*/ </style> </head> <body> <a href="#">公司首页</a> <a href="#">公司简介</a> <a href="#">产品介绍</a> <a href="#">联系我们</a> </body> </html>
运行效果如图所示：
注意：同时使用链接的4种伪类时，通常按照a:link、a:wisited、a:hover和a:active的顺序书写，否则定义的样式可能不起作用。除了文本样式之外，链接伪类还常常用于控制超链接的背景、边框等样式。
