前端开发_HTML5_CSS部分(三)

本文主要是介绍前端开发_HTML5_CSS部分(三)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、CSS选择器(给页面指定的标签添加指定的样式)

1.引入

上一节课，给大家讲解了相关的基本的也是使用最多的选择器，下面我们一起来讲解一下扩展选择器，扩展选择器是基于页面标签架构的一种关系型的选择器。接下来我们一起来学习。

2.分类

扩展选择器主要包含:组合选择器、包含选择器、交集选择器和伪类选择器。

3.详解

(1)、组合选择器

①、组合选择器概述:具有相同的样式的CSS为了简化代码合成使用公共代码部分的新样式标识形式。

②、组合选择器的代码过程

给出一个段落标签p内容的样式为:p{color:red;font-size:20px;}给出一个类选择器:.redstyle{color:red;font-size:20px;}给出一个ID选择器:#style{color:red;font-size:20px;}上述代码的CSS内部样式是相同的，所以为了方便和节省代码，所以 我们就使用组合选择器把所有的代码合成一个,中间使用","隔开:p,.redstyle,#style{color:red;font-size:20px;}

③:组合选择器的代码使用示例以及效果图

<style type="text/css">/* p{font-size: 28px;font-family: "宋体";color: red;}.test{font-size: 28px;font-family: "宋体";color: red;}#demo{font-size: 28px;font-family: "宋体";color: red;} */p,.test,#demo{font-size: 28px;font-family: "宋体";color: red;}		
</style><body><p>江雪</p><p>千山鸟飞绝，万径人踪灭。</p><p class="test">孤舟蓑笠翁，独钓寒江雪。</p>
</body>

(2)、包含选择器

①、包含选择器概述:包含选择器顾名思义存在着元素之间的包含关系，也就是说它是属于一个元素嵌套着其他的元素。这一种选择器是比较常见也常用的一种。

②、组合选择器代码使用示例以及效果图

<style type="text/css">.containner ul li a{color: red;text-decoration: none;}.containner ul{list-style: none;}
</style><body><div class="containner">最喜欢吃的水果是:<ul><li><a href="#">石榴</a></li><li><a href="#">葡萄</a></li><li><a href="#">甘蔗</a></li><li><a href="#">苹果</a></li></ul></div>
</body>

说明:.containner ul li a{}，该代码表明containner 中包含着ul标签，ul标签包含着li标签，li标签包含着a标签。

(3)、伪类选择器

①、伪类选择器概述:伪类选择器用于定义元素的特殊状态。一般情况是用于触发鼠标操作的时候会触发特殊的状态，主要有以下的几种:

标签:link:设置没有访问时候的样式
标签:visited:设置访问后的样式
标签:hover:设置鼠标悬停时候的样式
标签:active:设置单击时候的样式

②、伪类选择器语法

标签:link{//样式信息
}--->未触发的时候所存在的样式信息标签:visited{//样式信息
}--->鼠标单击的时候触发所定义的样式特效标签:hover{//样式信息
}--->鼠标悬停的时候触发所定义的样式特效标签:active{//样式信息
}--->鼠标单击的时候触发所定义的样式特效

③、伪类选择器代码使用示例以及效果图

<style type="text/css">a:link{color: red;text-decoration: none;}a:visited{color: green;text-decoration: line-through;}a:hover{color:#aa00ff;}a:active{color:#55ff00;}
</style><body><p><a href="seconds.html">这是一个可以跳转的超链接</a></p>
</body>