思维导图
css选择器
选择器是CSS3中一个重要的内容，在上一章中已经介绍过一些常用的选择器，这些选择器基本上能够满足设计者常规的设计需求。但在CSS3中还有一些选择器，使用这些选择器可以大幅度提高
设计者书写和修改样式表的效率。
标签选择器
标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一 类标签指定统- -的CSS样式。
其基本语法格式如下:
标签名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
h1 {font-size:60px;color :red;text-align: center; }
h2 {font-size:60px;color :red;text-align: center; }
p {font-size:30px; color:blue;text-align: center; }这就是一个标签选择器。
标签选择器他会吧这个p或者h1标签都给样式化
类选择器
类选择器使用"."(英文点号)进行标识，后面紧跟类名,其基本语法格式如下:
.类名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
特别要注意前面的类符号
<style type="text/css">
.g{color:#176cee; font-size:100px; } /*设置颜色为蓝，字体像素60*/
.o{color:#d4412d; font-size:100px; } /*设置颜色红色，字体像素60*/
.oo{color:#ffb404; font-size:100px; } /*设置颜色黄色，字体像素60*/
</style>id选择器
id选择器使用"#"进行标识，后面紧跟id名，其基本语法格式如下:
#id名{属性1:属性值1;属性2:属性值2;属性3:属性值3; }
#one{
font-size: 12px;
text-align: center;
}标签指定式选择器
标签指定式选择器Q又称交集选择器，由两个选择器构成，中第一个为标记选择器， 第二个为
class选择器或id选择器，两个选择器之间不能有空格。
p.special{ color:red;} /*标签指定式选择器*/
后代选择器
后代选择器用来选择元素或元素组的后代，写法就是把外层标记写在前面,内层标记写在后边，中
间用空格分隔。当标记发生嵌套Q时，内层标记就成为外层标记的后代。
p strong{color:red;} /*后代选择器*/
用于p标签下的strong标签。
并集选择器
并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器都可以并集选择器的一部分。如果某些选择器定义的样式完全相同或部分相同,就可以利用并集选择器来实现。
h2,h3,p{color:red; font-size:14px;} /*不同标签组成的并集选择器*/
h3,.special,#one{text-decoration:underline;} /*标签、类、id组成的的并集选择器*/通
配符选择器通配符选择器用“*"号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法
格式如下:
*{属性1:属性值1;属性2:属性值2;属性3:属性值3; }
*{color:red; font-size:18px; font-style:normal;}
子元素选择器
子元素择器主要用来选择某个元素的第一级子元素。
<p>
<strong> </strong>
</p>p标签为父标签，strong为子标签
希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：h1 > strong
<style type="text/css">
p > strong{
color: red
}
</style>作用与p标下的strong标签
相邻兄弟选择器（+、~）
相邻兄弟选择器又称兄弟选择器，用来选择与某元素位于同一个父元素之中，且位于该元素之后的兄弟元素。
:父标签~子标签{属性：属性值；}
该选择器使用加号“+”来链接前后两个选择器。选择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一个元素。也就是父标签（header）标签下的（p）
header+p{
color: #f4961d;
}
普通兄弟
选择器使用 “~”来链接前后两个选择器。选择器中的两个元素有同一个父亲，但第二个元素不必紧跟第一个元素。也就是父标签下的所有子标签。
:父标签~子标签{属性：属性值；}
header~p{
color: #f4961d;
}与相邻兄弟选择器不同的是，普通兄弟选择器作用与下面相邻标签header下的所有p标签
案例家乡的雪
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>兄弟选择器的使用</title>
<style type="text/css">
header{
font-size: 20px;
font-weight: bold;
}
header+p{
color: #f4961d;
}
</style>
</head>
<body>
<header>家乡的雪</header>
<p> 我的家乡很美，春天花香鸟语，夏天百鸟齐飞，
秋天硕果蕾蕾，冬天是最美的，尤其是冬天的雪。</p>
<p> 雪纷纷扬扬来到人间，像只 只银色蝴蝶， 在空中翩翩起舞， 顷刻间，天地一色，房屋上白了 ，
想一座座玉山:树上全白了，像一个个用白银砌出的雕像:地上全白了，像一-张张雪白的地毯。我仿佛来到了一个粉妆玉砌
的童话世界。踩在雪地上发出“咯吱咯吱’的声音。</p>
</body>
</html> 
区别，可以看出header下的p标签还是有变化的 。
结构化伪类选择器
结构化伪类选择器允许开发者根据文档结构来指定元素的样式。
:root选择器
:root选择器用于匹配文档根元素，也就是说使用“:root选择器”定义的样式，对所有页面元素都生效。有点相当于类选择器。
:root{
color: #f4961d;
}:not选择器
如果对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式，可以使用:not选择器。
父选择器 *:not(子选择器){
属性：属性值
}
body *:not(h3){
color: orange; /*作用与body下的h3标签*/
font-size: 20px;
font-family: "宋体";
}only-child 选择器
:only-child 选择器用于匹配属于某父元素的唯一子元素的元素。我们讲到标签的父子级关系他是作用与父标签下唯一的子标签。
子元素:only-child{属性:属性值;}
strong:only-child{color:red;}:first-child选择器和:last-child选择器
:first-child选择器和:last-child选择器分别用于为父元素中的第一个或者最后一个子元素设置样式。
标签名:first-child {属性：属性;}
p:first-child{color：red}作用于所有p表签下的第一个p标签
标签名:last-child{属性：属性值;}
p:last-child{color：red}作用于所有p表签下的最后一个p标签
如果选择不是倒数或正数一行:first-child选择器和:last-child选择器 就不管用了，我们就用nth-child(n)和:nth-last-child(n)选择器（n就表示想正数或倒数的第几个），它们是:first-child选择器和:last-child选择器的扩展。
:nth-of-type(n)和:nth-last-of-type(n)选择器
:nth-of-type(n)和:nth-last-of-type(n)选择器用于匹配属于父元素的特定类型的第 n 个子元素和倒数第n个子元素。
标签名字:nth-of-type(正数第一个){属性：属性值;}
h2:nth-of-type(1){color:#f09;}标签名:nth-last-of-type(倒数第几个){属性：属性值;}
h2:nth-last-of-type(1){color:#12ff65;}案例设置段落样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置文章段落样式</title>
<style type="text/css">
h2:nth-child(1){color:red;}
p:nth-child(2){color: #fc5818;}
p:nth-child(3){color: #f64de4;}
p:nth-child(4){color: #a0e64d;}
p:nth-child(5){color: #744de6;}
P:nth-last-of-type(1){color: #4db9e6;}
</style>
</head>
<body>
<h2>匆匆</h2>
<p> 燕子去了，有再来的时候:杨柳枯了，有再青的时候:桃花谢了，有再开的时候。但是，聪明的，
你告诉我，我们的日子为什么-去不复返呢?一是有人偷了 他们罢:那是谁?又藏在何处呢?是他们自己逃走了罢:现在
又到了哪里呢?
</p>
<p> 我不知道他们给了我多少日子:但我的手确乎是渐渐空虚了。在默默里算着，八千多日子已经从
我手中溜去:像针尖上一滴水滴在大海里，我的日子滴在时间的流里，没有声音，也没有影子。我不禁头涔涔而泪潸潸了。
</p>
<p> 去的尽管去了，来的尽管来着:去来的中间，又怎样地匆匆呢?早上我起来的时候，小屋里射进
两三方斜斜的太阳。太阳他有脚啊，轻轻悄悄地挪移了:我也茫茫然跟着旋转。于是————洗 手的时候，日子从水盆里过去:
吃饭的时候，日子从饭碗里过去:默默时，便从凝然的双眼前过去。我觉察他去的匆匆了，伸出手遮挽时，他又从遮挽着的
手边过去，天黑时，我躺在床上，他便伶伶俐俐地从我身上跨过，从我脚边飞去了。等我睁开眼和太阳再见，这算又溜走了
一日。我掩着面叹息。但是新来的日子的影儿又开始在叹息里闪过了。
</p>
<p> 在逃去如飞的日子里，在千门万户的世界里的我能做些什么呢?只有徘徊罢了，只有匆匆罢了:
在八千多日的匆匆里，除徘徊外，又剩些什么呢?过去的日子如轻烟，被微风吹散了，如薄雾，被初阳蒸融了:我留着些什
么痕迹呢?我何曾留着像游丝样的痕迹呢?我赤裸裸来到这世界，转眼间也将赤裸裸的回去罢?但不能平的，为什么偏要白
白走这一遭啊?
</p>
<p> 你聪明的，告诉我，我们的日子为什么一去不复返呢?
</p>
</body>
</html>结果
:empty选择器
:empty选择器用来选择没有子元素或文本内容为空的所有元素。
:empty{属性：属性值;}
标签内没有文本内容可用他设置样式
:empty{background-color: #999;}
伪元素选择器
所谓伪元素选择器，是针对CSS中已经定义好的伪元素使用的选择器。CSS中常用的伪元素选择器有:before伪元素选择器和:after伪元素选择器
:before伪元素选择器和:after伪元素选择器
<元素>::before { content:文字/url(); }
:before伪元素选择器用于在被选元素的内容前面插入内容。
P::before{content: url(images/tubiao.png);}:after伪元素选择器用于在某个元素之后插入一些内容，使用方法与:before选择器相同。
P::after{content: url(images/tubiao.png);}案例新闻小制作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>新闻小制作</title>
<style type="text/css">
div{list-style: none;margin: 0;padding: 0;}
P{
list-style: none;
line-height: 32px;
}
P::before{content: url(images/tubiao.png);}
</style>
</head>
<body>
<h2>信息港</h2>
<div>
<p>2016年传智各学科学费价格表</p>
<p>不敲代码网络营销助你拿高薪! </p>
<p>PHP助你快速入门，就业拿10K</p>
<p>想成为会代码的全能设计师，GO! </p>
</div>
</body>
</html>
1952
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
