HTML5开发培训CSS选择器与文字段落属性和背景属性和列表属性上.docx

1、HTML5开发培训CSS选择器与文字段落属性和背景属性和列表属性上HTML5开发培训CSS选择器及文字段落属性和背景属性和列表属性(上)我们已经讲了一部分选择器了，今天还要继续讲一些选择器，以便我们能更快的找到页面中的元素并修饰他的样式。另外我们看到页面的标签还需要修饰其它的样式，比如背景图像，文字间距等，所以我们还讲些样式。通过以下几点介绍： 关系选择器 动态伪类选择器 结构性伪类选择器 文字属性 段落属性 背景属性 列表属性好了，我们先来看一下关系选择器一、 关系选择器关系选择器选择器功能E F后代选择器EF子元素选择器E+F选取当前元素后一个兄弟元素E F选取当前元素后所有的兄弟元素 好

2、了，我们一一介绍一下： 1.E F：后代选择器，找到页面中相应的的子元素及孙子及重孙子元素，因为这些元素都是后代元素，我们把标签的第一层嵌套的元素叫子元素，再一层嵌套及以后嵌套的元素及子元素都叫后代元素。（当然也是相对的）。后代选择器可以是我们第三章讲过的所有的基本选择器中的一种，我们先理一下元素之间的层次关系。 相关的内容我是div的孙子元素（后代元素），但是我也是p的儿子，这就体现出“相对”了 我是div的儿子,并且我是p紧邻的兄弟元素，我还是p后面的所有的兄弟元素 我是p后面的所有的兄弟元素 好了，了解所有元素之间的关系后，我们就可以通过相关的选择器来改变他们的样式了。代码： div s

3、pan background-color: yellow; 相关的内容我是div的孙子元素（后代元素） 我是div的儿子我是div的儿子 页面效果 2.EF子元素选择器 找到页面中相应元素的子元素 代码： div span background-color: yellow; 相关的内容我是div的孙子元素（后代元素） 我是div的儿子我是div的儿子 页面效果3.E+F 选取当前元素后一个兄弟元素 代码： p+span background-color: yellow; 相关的内容我是div的孙子元素（后代元素） 我是p的紧邻的元素 我是p后面的所有的元素 页面代码： 4. E F 选取当前元

4、素后所有的兄弟元素 代码： pspan background-color: yellow; 相关的内容我是div的孙子元素（后代元素） 我是p后面的所有的元素 我是p后面的所有的元素 页面效果关系选择器我们经常使用，因为我们写代码的时候，经常这样写： CSS选择器 我是h3标签 我是段落标签 我是h3标签 我是段落标签 观察上面的两段代码，以后我们写代码经常会这样写，一模一样的代码，我们设置第一个div的h3，p,input标签，第二个div里的h3，p,input标签不一样怎么办，我们不可能再定义很多个类别选择器对吧，所以我们就想到了用关系选择器。 来看代码： CSS选择器 .box_1 h

5、3 color: red; .box_1 p color: greenyellow; .box_1 input color: blue; .box_2 h3 color: pink; .box_2 p color: violet; .box_2 input color: orange; 我是h3标签 我是段落标签 我是h3标签 我是段落标签 页面效果当然我们也可以将两个类别选择器换成id选择器，当然标签嵌套更多层的话，我们选择器也可以嵌套更多层，但是我们尽量让选择器之间的嵌套控制在三层。二、 动态伪类选择器动态伪类选择器选择器功能E:link加了超链接时的样式E:visited访问过之后的样式

6、E:hover鼠标滑过的样式E:active鼠标点击时的样式动态伪类选择器，常给a标签使用，尤其是在IE6的年代，只能给a标签使用，但是在最新的浏览器，动态伪类选择器可以给任何一个标签使用。另外还要注意一点，写动态伪类选择器时，还要注意他的顺序，他顺序一定按照定义:link,:visited,:hover,:active的顺序定义，要不有的浏览器会识别的不是很好。方便大家记忆我们给其取个名字叫”爱情原则”,也就是”LoVeHAte”.好了，其实我们在学习a标签的时候，我们已经注意到了只要给文字添加了超链接，文字本身就会自带颜色，而这些效果往往不是我们不想要的。我们需要从新定义文字的状态。我们先

7、来看一下原始状态。代码： CSS选择器 加了超链接的文字状态 页面效果：默认添加了超链接时的状态（：link）：文字颜色为蓝色，文字带有下划线。默认添加了超链接时的状态（：visited）：文字颜色为紫色，文字带有下划线。默认鼠标经过时的状态（：hover）:文字颜色为蓝色，文字带有下划线。默认鼠标点时的状态（：active）:文字颜色为红色，文字带有下划线。以上四种状态时默认的时候的状态，不是我们想要的，如果我们想改变，就要从新设置这四种状态的样子就可以了。（因为我们学的样式还不多，所以我们主要还是以颜色为例，其实下划线及背景颜色等都是可以改变的）请看代码： CSS选择器 a:link co

8、lor:red;/*红色*/ a:visited color:blue;/*蓝色*/ a:hover color:greenyellow;/*黄绿色*/ a:active color:orange;/*橙色*/ 加了超链接的文字状态 页面效果改变之后链接时（：link）的状态：文字颜色为红色，有下划线。改变之后访问之后（：visited）的状态：文字颜色为蓝色，有下划线。改变之后鼠标经过（：hover）的状态：文字颜色为黄绿色，有下划线。改变之后鼠标点击（：active）的状态：文字颜色为橙色，有下划线。其实我们在页面中看到的超链接的状态，不需要分设置这四种情况，这样设置的办法一是麻烦，二是浏

9、览器中也存在着兼容问题（比如在谷歌浏览器中，给多个文字添加了超链接，我们只是点了其中一个，另其它的颜色都变成了访问过之后的了）。所以我们平时只需要设置a标签的状态，他表示四个状态，然后我们再设置：hover的状态，就把a标签的:hover的状态给替换掉了。就解决了以上两种问题。代码： CSS选择器 a color:red; /*红色*/ a:hover color:greenyellow;/*黄绿色*/ 加了超链接的文字状态 加了超链接的文字状态 页面效果这样的时候，这四种状态都是都是一样的颜色。都是红色。然后鼠标经过时是这样的：鼠标经过时为黄绿色。好了，动态伪类选择器我们就讲到这里，其它的状

10、态等我们学了更多的CSS样式直接往里加就可以了。三、 结构性伪类选择器结构性伪类选择器选择器功能E:first-child匹配父元素的第一个子元素 E:last-child 匹配父元素的最后一个子元素 E:nth-child(n) 匹配父元素的第n个子元素 E:nth-last-child(n) 匹配父元素的倒数第n个子元素E E:only-child 匹配父元素仅有的一个子元素EE:first-of-type 匹配同类型中的第一个同级兄弟元素E。 E:last-of-type 匹配同类型中的最后一个同级兄弟元素E 。E:only-of-type 匹配同类型中的唯一的一个同级兄弟元素E。E:n

11、th-of-type(n)匹配同类型中的第n个同级兄弟元素E。 E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E。 好了，我们对以上的结构性伪类选择器不做全部讲解，我们只讲一些在制制作网页时常用到的，其它我们可以参考一下手册就可以学会了！1. E:first-child： 匹配父元素的第一个子元素代码： CSS选择器 p:first-child color: red; 我是div第一个子元素 我是div第二个子元素 我是div第三个子元素 我是div最后一个子元素 页面效果 2. E:last-child 匹配父元素的最后一个子元素代码： CSS选择器 p:l

12、ast-child color: red; 我是div第一个子元素 我是div第二个子元素 我是div第三个子元素 我是div最后一个子元素 页面效果3. E:nth-child(n) 匹配父元素的第n个子元素,注意n是从1开始的。N的写法可以用多种，比如(2n、2n+1、odd、even等)代码： CSS选择器 p:nth-child(2) color: red; 我是div第一个子元素 我是div第二个子元素 我是div第三个子元素 我是div最后一个子元素 页面效果下面请看一个综合案例 CSS选择器 li:nth-child(even) color:greenyellow; li:nth

13、-child(odd) color:deeppink; li:first-child color: red; li:last-child color: blue; 北国之美，雪花飘舞 北国之美，雪花飘舞 北国之美，雪花飘舞 北国之美，雪花飘舞 北国之美，雪花飘舞 北国之美，雪花飘舞 北国之美，雪花飘舞 北国之美，雪花飘舞 北国之美，雪花飘舞 北国之美，雪花飘舞 北国之美，雪花飘舞 北国之美，雪花飘舞 北国之美，雪花飘舞 北国之美，雪花飘舞 页面效果但是我们写代码的时候会遇到这种情况：代码： CSS选择器 p:first-child color:red; p:nth-child(3) color

14、: blue; 我是标题 我是一些内容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-typ

15、e(n) 匹配同类型中的第n个同级兄弟元素E。 CSS选择器 p:nth-of-type(odd) color: greenyellow; p:nth-of-type(even) color: deeppink; p:first-of-type color:red; p:last-of-type color: blue; 我是标题 我是一些内容1 我是一些内容2 我是一些内容3 我是一些内容4 我是一些内容5 我是一些内容6 我是一些内容7 我是一些内容8 总之：今天很开心了 页面效果好了，CSS3中的选择器有很多种，但是我们目前先讲这么多，等我们后面用到那种选择器的时候，再继续讲解，而且到后也非常的好理解了。大家还记得样式的定义方式吗？选择器样式1：样式值1;样式2:样式值2;,所以大家应该猜得到我们接下来应该讲解那些内容了吧，明天我们主要讲解的内容是CSS样式（CSS属性）。育知同创教育 版权所有