HTML5开发培训CSS选择器及文字段落属性和背景属性和列表属性上DOCWord文档格式.docx
《HTML5开发培训CSS选择器及文字段落属性和背景属性和列表属性上DOCWord文档格式.docx》由会员分享，可在线阅读，更多相关《HTML5开发培训CSS选择器及文字段落属性和背景属性和列表属性上DOCWord文档格式.docx（26页珍藏版）》请在冰豆网上搜索。
1.EF：
后代选择器，找到页面中相应的的子元素及孙子及重孙子元素，因为这些元素都是后代元素，我们把标签的第一层嵌套的元素叫子元素，再一层嵌套及以后嵌套的元素及子元素都叫后代元素。
（当然也是相对的）。
后代选择器可以是我们第三章讲过的所有的基本选择器中的一种，我们先理一下元素之间的层次关系。
<
!
DOCTYPEhtml>
html>
<
head>
<
metacharset="
UTF-8"
>
title>
/title>
styletype="
text/css"
/style>
/head>
body>
div>
<
p>
相关的内容<
span>
我是div的孙子元素（后代元素），但是我也是p的儿子，这就体现出“相对”了<
/span>
/p>
我是div的儿子,并且我是p紧邻的兄弟元素，我还是p后面的所有的兄弟元素<
我是p后面的所有的兄弟元素<
/div>
/body>
/html>
好了，了解所有元素之间的关系后，我们就可以通过相关的选择器来改变他们的样式了。
代码：
divspan{
background-color:
yellow;
}
我是div的孙子元素（后代元素）<
我是div的儿子<
页面效果
2.E>
F子元素选择器找到页面中相应元素的子元素
代码：
页面效果
3.E+F选取当前元素后一个兄弟元素
p+span{
我是p的紧邻的元素<
我是p后面的所有的元素<
页面代码：
4.E~F选取当前元素后所有的兄弟元素
p~span{
关系选择器我们经常使用，因为我们写代码的时候，经常这样写：
CSS选择器<
h3>
我是h3标签<
/h3>
我是段落标签<
inputtype="
button"
value="
提交"
/>
观察上面的两段代码，以后我们写代码经常会这样写，一模一样的代码，我们设置第一个div的h3，p,input标签，第二个div里的h3，p,input标签不一样怎么办，我们不可能再定义很多个类别选择器对吧，所以我们就想到了用关系选择器。
来看代码：
.box_1h3{
color:
red;
.box_1p{
greenyellow;
.box_1input{
blue;
.box_2h3{
pink;
.box_2p{
violet;
.box_2input{
orange;
divclass="
box_1"
box_2"
当然我们也可以将两个类别选择器换成id选择器，当然标签嵌套更多层的话，我们选择器也可以嵌套更多层，但是我们尽量让选择器之间的嵌套控制在三层。
二、动态伪类选择器
动态伪类选择器
E:
link
加了超链接时的样式
visited
访问过之后的样式
hover
鼠标滑过的样式
active
鼠标点击时的样式
动态伪类选择器，常给a标签使用，尤其是在IE6的年代，只能给a标签使用，但是在最新的浏览器，动态伪类选择器可以给任何一个标签使用。
另外还要注意一点，写动态伪类选择器时，还要注意他的顺序，他顺序一定按照定义:
link,:
visited,:
hover,:
active的顺序定义，要不有的浏览器会识别的不是很好。
方便大家记忆我们给其取个名字叫”爱情原则”,也就是”LoVeHAte”.好了，其实我们在学习a标签的时候，我们已经注意到了只要给文字添加了超链接，文字本身就会自带颜色，而这些效果往往不是我们不想要的。
我们需要从新定义文字的状态。
我们先来看一下原始状态。
ahref="
#"
加了超链接的文字状态<
/a>
页面效果：
默认添加了超链接时的状态（：
link）：
文字颜色为蓝色，文字带有下划线。
visited）：
文字颜色为紫色，文字带有下划线。
默认鼠标经过时的状态（：
hover）:
默认鼠标点时的状态（：
active）:
文字颜色为红色，文字带有下划线。
以上四种状态时默认的时候的状态，不是我们想要的，如果我们想改变，就要从新设置这四种状态的样子就可以了。
（因为我们学的样式还不多，所以我们主要还是以颜色为例，其实下划线及背景颜色等都是可以改变的）请看代码：
a:
link{color:
red;
}/*红色*/
visited{color:
blue;
}/*蓝色*/
hover{color:
greenyellow;
}/*黄绿色*/
active{color:
orange;
}/*橙色*/
改变之后链接时（：
link）的状态：
文字颜色为红色，有下划线。
改变之后访问之后（：
visited）的状态：
文字颜色为蓝色，有下划线。
改变之后鼠标经过（：
hover）的状态：
文字颜色为黄绿色，有下划线。
改变之后鼠标点击（：
active）的状态：
文字颜色为橙色，有下划线。
其实我们在页面中看到的超链接的状态，不需要分设置这四种情况，这样设置的办法一是麻烦，二是浏览器中也存在着兼容问题（比如在谷歌浏览器中，给多个文字添加了超链接，我们只是点了其中一个，另其它的颜色都变成了访问过之后的了）。
所以我们平时只需要设置a标签的状态，他表示四个状态，然后我们再设置：
hover的状态，就把a标签的:
hover的状态给替换掉了。
就解决了以上两种问题。
a{
/*红色*/
hover{
/*黄绿色*/
这样的时候，这四种状态都是都是一样的颜色。
都是红色。
然后鼠标经过时是这样的：
鼠标经过时为黄绿色。
好了，动态伪类选择器我们就讲到这里，其它的状态等我们学了更多的CSS样式直接往里加就可以了。
三、结构性伪类选择器
结构性伪类选择器
first-child
匹配父元素的第一个子元素
last-child
匹配父元素的最后一个子元素
nth-child（n）
匹配父元素的第n个子元素
nth-last-child（n）
匹配父元素的倒数第n个子元素E
only-child
匹配父元素仅有的一个子元素E
first-of-type
匹配同类型中的第一个同级兄弟元素E。
last-of-type
匹配同类型中的最后一个同级兄弟元素E。
only-of-type
匹配同类型中的唯一的一个同级兄弟元素E。
nth-of-type（n）
匹配同类型中的第n个同级兄弟元素E。
nth-last-of-type（n）
匹配同类型中的倒数第n个同级兄弟元素E。
好了，我们对以上的结构性伪类选择器不做全部讲解，我们只讲一些在制制作网页时常用到的，其它我们可以参考一下手册就可以学会了！
1.E:
first-child：
匹配父元素的第一个子元素
p:
first-child{
我是div第一个子元素<
我是div第二个子元素<
我是div第三个子元素<
我是div最后一个子元素<
2.E:
last-child匹配父元素的最后一个子元素
last-child{
3.E:
nth-child（n）匹配父元素的第n个子元素,注意n是从1开始的。
N的写法可以用多种，比如（2n、2n+1、odd、even等）
nth-child
（2）{
下面请看一个综合案例
li:
nth-child（even）{
nth-child（odd）{
deeppink;
ul>
li>
北国之美，雪花飘舞<
/li>
/ul>
但是我们写代码的时候会遇到这种情况：
p:
nth-child（3）{
我是标题<
我是一些内容1<
我是一些内容2<
我是一些内容3<
我是一些内容4<
总之：
今天很开心了<
仔细观察代码，第一个p标签已经不是div的第一个子元素了，所以再写p:
first-child是找不到这个标签的。
所以不会改变颜色，而nth-child（3）也是找到的是第二个p标签，因为h3才是div的第一个子元素，这样导致后面的代码都会出现跟真正理解上的不一样，这个时候我们需要：
of-type选择器。
4.E:
first-of-type匹配同类型中的第一个同级兄弟元素E。
5.E:
last-of-type匹配同类型中的最后一个同级兄弟元素E。
6.E:
nth-of-type（n）匹配同类型中的第n个同级兄弟元素E。
nth-of-type（odd）{
nth-of-type（even）{
deeppink;
first-of-type{
last-of-type{
我是一些内容5<
我是一些内容6<
我是一些内容7<
我是一些内容8<
好了，CSS3中的选择器有很多种，但是我们目前先讲这么多，等我们后面用到那种选择器的时候，再继续讲解，而且到后也非常的好理解了。
大家还记得样式的定义方式吗？
选择器{样式1：
样式值1;
样式2:
样式值2;
…},所以大家应该猜得到我们接下来应该讲解那些内容了吧，明天我们主要讲解的内容是CSS样式（CSS属性）。
育知同创教育版权所有
升级会员 