CSS3选择器
属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。
1.E[att^=value]属性选择器
E[att^=value]属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含前缀为value的子字符串。需要注意的是E是可以省略的，如果省略则表示可以匹配满足条件的任意元素。
下面通过一个案例对E[att^=value]属性选择器的用法进行演示：
"utf-8">
E[att^=value]
"one">
为了看日出，我常常早起。那时天还没有大亮，周围非常清静，船上只有机器的响声。
天空还是一片浅蓝，颜色很浅。转眼间天边出现了一道红霞，慢慢地在扩大它的范围，
加强它的亮光。我知道太陽要从天边升起来了，便不转眼地望着那里。
"one1">
果然过了一会儿，在那个地方出现了太陽的小半边脸，红是真红，却没有亮光。这个太
陽好像负着重荷似地一步一步、慢慢地努力上升，到了最后，终于冲破了 云霞，完全跳
出了海面，颜色红得非常可爱。一刹那间，这个深红的圆东西，忽然发出了夺目的亮光，
射得人眼睛发痛，它旁边的云片也突然有了光彩。
"two1">
有时太陽走进了云堆中，它的光线却从云里射下来，直射到水面上。这时候要分辨出
哪里是水，哪里是天，倒也不容易，因为我就只看见一片灿烂的亮光。
运行效果如图所示：
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>
<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>Javah2>
<p>Java是一种可以撰写跨平台应用程序的面向对象的程序设计语言。p>
<h2>iOSh2>
<p>iOS是由苹果公司开发的移动操作系统。p>
<h2>PHPh2>
<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">跳转至内容1a>p>
<p><a href="#news2">跳转至内容2a>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名加“：”构成。
超链接标记的伪类有4种，具体如表所示：
| 超链接标记的伪类 | 含义 |
| 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的顺序书写，否则定义的样式可能不起作用。除了文本样式之外，链接伪类还常常用于控制超链接的背景、边框等样式。