4、层级选择器

主要应用在标签嵌套的结构中，层级选择器，是结合上面的两种选择器来写的选择器,它可与标签选择器结合使用，减少命名，同时也可以通过层级，限制样式的作用范围。

代码演示：

运行结果

5、伪类选择器

常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态。

代码演示：

运行结果

四、CSS样式形式

CSS一共分为三种样式，分别为：

• 外部样式
• 内部样式
• 行内样式

下面将对这三种样式进行演示说明  

1、外部样式

   格式：

<link type="text/css" rel="stylesheet" href="css路径" />

   用处：这种形式是把css单独写到一个css文件内，然后在源代码中以link方式链接。它的好处是不但本页可以调用，其它页面也可以调用，是最常用的一种形式。

   备注：

       Rel：指明连接的是什么文件；

       Type：指明引入的文件的格式类型；  

       Href：指明文件的路径，以引入文件为基准的相对路径。  

代码演示：

    举例：

<link type="text/css" rel="stylesheet" href="index.css"/>

   先在HTML文件中写入内容

• 然后创建一个index.css文件，在index.css文件中设置h3标签文本颜色为红色

• 最后运行HTML文件，文字变为红色，这就说明HTML文件应用了index.css中的样式

2、内部样式

格式：

<style type="text/css">
        选择器 {声明1、声明2………}
</style>

用处：这种形式是内部样式表，它是以<style>和</style>结尾，写在源代码的head标签内。这样的样式表只能针对本页有效。不能作用于其它页面

代码演示：

运行结果

3、行内样式

   行内样式：就是直接在html标签后面写样式代码

   举例：

<p style="color:red;text-align:center;font-size:30px">行内样式</p> 

   用处：这种在标签内以style标记的为内部样式，内部样式只针对标签内的元素有效，因其没有和内容相分离，所以不建议使用。

   注意：CSS样式优先级：近的>远的(行内样式>内部样式>外部样式)  

代码演示：  

   内部样式中设置p标签的文本内容为红色，行内样式设置p标签的文本内容为绿色  

运行结果