CSS3基础

码说芯语

已于 2023-11-14 13:32:04 修改

阅读量894

点赞数

分类专栏： Web # Html+CSS+Java/TypeScript 文章标签： css3 前端 css

于 2023-08-15 21:04:49 首次发布

本文链接：https://blog.csdn.net/YYBDESHIJIE/article/details/132307086

版权

Web 同时被 2 个专栏收录

56 篇文章 2 订阅

订阅专栏

Html+CSS+Java/TypeScript

30 篇文章 0 订阅

订阅专栏

文章目录

1、初次使用CSS
2、元素选择器
3、关系选择器
4、属性选择器
5、伪类选择器
6、伪对象选择器

CSS3在CSS2的基础上增加了很多功能，如圆角、多背景、透明度、阴影等，以帮助开发人员解决一些实际问题。

1、初次使用CSS

与HTML5一样，CSS3也是一种标识语言，可以使用任意文本编辑器编写代码。下面简单介绍CSS3的基本用法。

1.1、CSS样式

CSS语法单元是样式，每个样式包含两部分内容，即选择器和声明（或称规则），如下图所示。
在这里插入图片描述

选择器(selector)：指定样式作用于哪些对象，这些对象可以是某个标签、指定Class或ID值的元素等。浏览器在解析样式时，根据选择器来渲染对象的显示效果。
声明(declaration)：指定浏览器如何渲染选择器匹配的对象。声明包括两部分，即属性和属性值，并用分号来标识一个声明的结束，在一个样式中最后一个声明可以省略分号。所有声明被放置在一对大括号内，然后位于选择器的后面。
属性(property)：CSS预设的样式选项。属性名由一个单词或多个单词组成，多个单词之间通过连字符相连，这样能够很直观地了解属性所要设置样式的类型。
属性值(value)：定义显示效果的值，包括值和单位，或者仅定义一个关键字。

【示例】演示如何在网页中设计CSS样式。

第1步，新建网页文件，保存为test.html。
第2步，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表。
第3步，在<style>标签内输入下面的样式，定义网页字体大小为24px，字体颜色为白色。

    body{font-size: 24px; color: #fff;}

第4步，输入下面样式代码，定义段落文本的背景色为蓝色。

    p { background-color: #00F; }

第5步，在标签内输入下面一段话，然后在浏览器中预览，效果如下图所示。

    <p>莫等闲，白了少年头，空悲切。 </p>

完成代码：

<html>
  <head>
    <style type="text/css">
	  body{font-size:24px;color:#fff;}
	  p { background-color: #00F; }
	</style>
  </head>
  
   <body>
      <p>莫等闲，白了少年头，空悲切。 </p>
   </body>
</html>

效果如下图所示：
在这里插入图片描述

1.2、引入CSS样式

在网页文档中，如何让浏览器能够识别和解析CSS样式，共有3种方法。

1.2.1、行内样式

把CSS样式代码置于标签的style属性中，例如：

    <span style="color:red;">红色字体</span>
    <div style="border:solid 1px blue; width:200px; height:200px;"></div>

一般不建议使用行内样式，这种用法没有真正把HTML结构与CSS样式分离出来。

1.2.2、内部样式

    <style type="text/css">
    body {/*页面基本属性*/
        font-size: 12px;
        color: #CCCCCC;
    }
    /*段落文本基础属性*/
    p { background-color: #FF00FF; }
    </style>

把CSS样式代码放在

内部样式一般位于网页的头部区域，目的是让CSS源代码早于页面源代码被下载并解析。

1.2.3、外部样式

把样式放在独立的文件中，然后使用标签或者@import关键字导入。一般网站都采用这种方法来设计样式，真正实现HTML结构和CSS样式的分离，以便统筹规划、设计、编辑和管理CSS样式。

1.3、CSS样式表

样式表是由一个或多个CSS样式组成的样式代码段。样式表包括内部样式表和外部样式表，它们没有本质不同，只是存放位置不同。

内部样式表包含在<style>标签内，一个<style>标签就表示一个内部样式表。而通过标签的style属性定义的样式属性就不是样式表。如果一个网页文档中包含多个<style>标签，就表示该文档包含多个内部样式表。

如果CSS样式被放置在网页文档外部的文件中，则称为外部样式表。一个CSS样式表文档就表示一个外部样式表。实际上，外部样式表就是一个文本文件，其扩展名为.css。当把不同的样式复制到一个文本文件中后，另存为.css文件，则它就是一个外部样式表。

在外部样式表文件顶部可以定义CSS源代码的字符编码。例如，下面代码定义样式表文件的字符编码为中文简体。

    @charset "gb2312";

如果不设置CSS文件的字符编码，可以保留默认设置，则浏览器会根据HTML文件的字符编码解析CSS代码。

1.4、导入外部样式表

外部样式表文件可以通过两种方法导入HTML文档中。

1.4.1、使用`<link>`标签

使用<link>标签导入外部样式表文件的代码如下：

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

该标签必须设置的属性说明如下：

href：定义样式表文件URL。
type：定义导入文件类型，同style元素一样。
rel：用于定义文档关联，这里表示关联样式表。

1.4.2、使用@import命令

在<style>标签内使用@import关键字导入外部样式表文件的方法如下。

    <style type="text/css">
    @import url("001.css");
    </style>

在@import关键字后面，利用url()函数包含具体的外部样式表文件的地址。

1.5、CSS注释

在CSS中增加注释很简单，所有被放在“/*”和“*/”分隔符之间的文本信息都称为注释。

    /* 注释 */

或

    /*
    注释
    */

在CSS源代码中，各种空格是不被解析的，因此可以利用Tab键、空格键对样式表和样式代码进行格式化排版，以方便阅读和管理。

1.6、CSS属性

CSS属性众多，在W3C CSS 2.0版本中共有122个标准属性(http://www.w3.org/TR/CSS2/propidx.html)，在W3C CSS 2.1版本中共有115个标准属性(http://www.w3.org/TR/CSS21/propidx.html)，其中删除了CSS 2.0版本中的7个属性：font-size-adjust、font-stretch、marker-offset、marks、page、size和text-shadow。在W3C CSS 3.0版本中又增加了20多个属性(http://www.w3.org/Style/ CSS/current-work#CSS3)。

1.7、CSS继承性

CSS样式具有两个基本特性：继承性和层叠性。

CSS继承性是指后代元素可以继承祖先元素的样式。继承样式主要包括字体、文本等基本属性，如字体、字号、颜色、行距等，不允许继承的类型属性包括边框、边界、补白、背景、定位、布局、尺寸等。

提示：灵活应用CSS继承性，可以优化CSS代码，但是继承的样式的优先级是最低的。

【示例】在body元素中定义整个页面的字体大小、字体颜色等基本页面属性，这样包含在body元素内的其他元素都将继承该基本属性，以实现页面显示效果的统一。

新建网页文档，在<body>标签内输入如下代码，设计一个多级嵌套结构。

    <div id="wrap">
        <div id="header">
            <div id="menu">
                <ul>
                    <li><span>首页</span></li>
                    <li>菜单项</li>
                </ul>
            </div>
        </div>
        <div id="main">
            <p>主体内容</p>
        </div>
    </div>

在<head>标签内添加<style type="text/css">标签，定义内部样式表，然后为body定义字体大小为12px，通过继承性，则包含在body元素的所有其他元素都将继承该属性，并显示包含的字体大小为12px。

完整代码如下：

<html>
  <head>
    <style type="text/css">
	  body{font-size:12px;}
	</style>
  </head>
  
   <body>
          <div id="wrap">
        <div id="header">
            <div id="menu">
                <ul>
                    <li><span>首页</span></li>
                    <li>菜单项</li>
                </ul>
            </div>
        </div>
        <div id="main">
            <p>主体内容</p>
        </div>
    </div>
   </body>
</html>

在浏览器中预览，显示效果如下图所示：
在这里插入图片描述

1.8、CSS层叠性

CSS层叠性是指CSS能够对同一个对象应用多个样式的能力。

【示例1】新建网页文档，保存为test.html，在<body>标签内输入如下代码。

    <div id="wrap">看看我的样式效果</div>

在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，分别添加两个样式。

div {font-size:12px;}
div {font-size:14px;}

两个样式中都声明相同的属性，并应用于同一个元素上。在浏览器中测试，则会发现最后字体显示为14px。也就是说，14px字体大小覆盖了12px的字体大小，这就是样式层叠。

完整代码如下：

<html>
  <head>
    <style type="text/css">
	  div {font-size:12px;}
      div {font-size:14px;}
	</style>
  </head>
  
   <body>
       <div id="wrap">看看我的样式效果</div>
   </body>
</html>

在这里插入图片描述

当多个样式作用于同一个对象，则根据选择器的优先级确定对象最终应用的样式。

标签选择器：权重值为1。
伪元素或伪对象选择器：权重值为1。
类选择器：权重值为10。
属性选择器：权重值为10。
ID选择器：权重值为100。
其他选择器：权重值为0，如通配选择器等。

然后，以上面权值数为起点计算每个样式中选择器的总权值数。计算规则如下：

统计选择器中ID选择器的个数，然后乘以100。
统计选择器中类选择器的个数，然后乘以10。
统计选择器中标签选择器的个数，然后乘以1。

以此类推，最后把所有权重值数相加，即可得到当前选择器的总权重值，最后根据权重值来决定哪个样式的优先级大。

【示例2】新建一个网页，保存为test.html，在<body>标签内输入如下代码：

    <div id="box" class="red">CSS选择器的优先级</div>

在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，添加如下样式。

    body div#box { border:solid 2px red;}
    #box {border:dashed 2px blue;}
    div.red {border:double 3px red;}

完整代码如下：

<html>
  <head>
    <style type="text/css">
	  body div#box { border:solid 2px red;}
      #box {border:dashed 2px blue;}
      div.red {border:double 3px red;}
	</style>
  </head>
  
   <body>
        <div id="box" class="red">CSS选择器的优先级</div>
   </body>
</html>

对于上面的样式表，可以按如下方式计算它们的权重值。

    body div#box = 1 + 1 + 100 = 102;
    #box = 100
    di.red = 1 + 10 = 11

因此，最后的优先级为body div#box大于#box，#box大于di.red。可以看到显示效果为2px宽的红色实线，在浏览器中预览，显示效果如下图所示。
在这里插入图片描述
提示：与样式表中的样式相比，行内样式优先级最高；相同权重值时，样式最近的优先级最高；使用!important命令定义的样式优先级绝对高；!important命令必须位于属性值和分号之间，如#header{color:Red!important;}，否则无效。

1.9、CSS选择器

CSS3选择器是在CSS 2.1选择器的基础上新增了部分属性选择器和伪类选择器，以减少对HTML类和ID的依赖，使编写网页代码更加简单轻松。

根据所获取页面中元素的不同，可以把CSS3选择器分为5大类：元素选择器、关系选择器、伪类选择器、伪对象选择器和属性选择器。

其中，伪选择器包括伪类选择器和伪对象选择器。根据执行任务不同，伪类选择器又分为6种：动态伪类选择器、目标伪类选择器、语言伪类选择器、状态伪类选择器、结构伪类选择器、否定伪类选择器。

注意：CSS3将伪对象选择符前面的单个冒号(:)修改为双冒号(::)，用以区别伪类选择符，但以前的写法仍然有效。

2、元素选择器

元素选择器包括：标签选择器、类选择器、ID选择器和通配选择器。

2.1、标签选择器

标签选择器也称为类型选择器，它直接引用HTML标签名称，用来匹配同名的所有标签。

优点：使用简单，直接引用，不需要为标签添加属性。
缺点：匹配的范围过大，精度不够。

因此，一般常用标签选择器重置各个标签的默认样式。

【示例】统一定义网页中段落文本的样式为：段落内文本字体大小为12px，字体颜色为红色。为实现该效果，可以考虑选用标签选择器定义如下样式。

    p {
        font-size:12px;                          /* 字体大小为12px */
        color:red;                               /* 字体颜色为红色 */
    }

2.2、类选择器

类选择器以点号(.)为前缀，后面是一个类名。应用方法：在标签中定义class属性，然后设置属性值为类选择器的名称。

优点：能够为不同标签定义相同样式；使用灵活，可以为同一个标签定义多个类样式。
缺点：需要为标签定义class属性，影响文档结构，操作相对麻烦。

【示例】演示如何在对象中应用多个样式类。

第1步，新建文档，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表。

第2步，在<style>标签内输入下面样式代码，定义3个类样式：red、underline和italic。

    /* 颜色类  */
    .red { color: red; }                            /* 红色 */
    /* 下画线类 */
    .underline { text-decoration: underline; }      /*下画线 */
    /* 斜体类 */
    .italic { font-style: italic; }

第3步，在段落文本中分别引用这些类，其中第2段文本标签引用3个类。

    <p class="underline">问君能有几多愁？恰似一江春水向东流。</p>
    <p class="red italic underline">剪不断，理还乱，是离愁。别是一般滋味在心头。</p>
    <p class="italic">独自莫凭栏，无限江山，别时容易见时难。流水落花春去也，天上人间。</p>

完整代码如下所示：

<html>
  <head>
    <style type="text/css">
    /* 颜色类  */
    .red { color: red; }                            /* 红色 */
    /* 下画线类 */
    .underline { text-decoration: underline; }      /*下画线 */
    /* 斜体类 */
    .italic { font-style: italic; }
	</style>
  </head>
  
   <body>
    <p class="underline">问君能有几多愁？恰似一江春水向东流。</p>
    <p class="red italic underline">剪不断，理还乱，是离愁。别是一般滋味在心头。</p>
    <p class="italic">独自莫凭栏，无限江山，别时容易见时难。流水落花春去也，天上人间。</p>
   </body>
</html>

在这里插入图片描述

2.3、ID选择器

ID选择器以井号(#)为前缀，后面是一个ID名。应用方法：在标签中定义id属性，然后设置属性值为ID选择器的名称。

优点：精准匹配
缺点：需要为标签定义id属性，影响文档结构，相对于类选择器，缺乏灵活性。

**【示例】**如何在文档中应用ID选择器。
第1步，新建网页文档，在<body>标签内输入<div>标签。

    <div id="box">问君能有几多愁？恰似一江春水向东流。</div>

第2步，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表。

第3步，输入下面样式代码，为盒子定义固定宽和高，设置背景图像、边框和内边距大小。

    #box {/* ID样式  */
        background:url(images/1.png) center bottom;     /* 定义背景图像并居中、底部对齐 */
        height:200px;                                   /* 固定盒子的高度 */
        width:400px;                                    /* 固定盒子的宽度 */
        border:solid 2px red;                           /* 边框样式 */
        padding:100px;                                  /* 增加内边距 */
    }

第4步，在浏览器中预览，效果如下图所示。
在这里插入图片描述
**提示：**不管是类选择器，还是ID选择器，都可以指定一个限定标签名，用于限定它们的应用范围。例如，针对上面示例，在ID选择器前面增加一个<div>标签，这样div#box选择器的优先级会大于#box选择器的优先级。在同等条件下，浏览器会优先解析div#box选择器定义的样式。对于类选择器，也可以使用这种方式限制类选择器的应用范围，并增加其优先级。

2.4、通配选择器

通配选择器使用星号(*)表示，用来匹配文档中的所有标签。
【示例】使用下面样式可以清除所有标签的边距。

    * { margin: 0; padding: 0; }

3、关系选择器

当把两个简单的选择器组合在一起，就形成了一个复杂的关系选择器，通过关系选择器可以精确匹配HTML结构中特定范围的元素。

3.1、包含选择器

包含选择器通过空格连接两个简单的选择器，前面选择器表示包含的对象，后面选择器表示被包含的对象。

优点：可以缩小匹配范围。
缺点：匹配范围相对较大，影响的层级不受限制。

【示例】新建网页文档，在<body>标签内输入如下结构。

    <div id="wrap">
        <div id="header">
            <p>头部区域段落文本</p>
        </div>
        <div id="main">
            <p>主体区域段落文本</p>
        </div>
    </div>

在<head>标签内添加<style type="text/css">标签，定义一个内部样式表。然后定义样式，实现如下设计目标。

定义<div id="header">包含框内的段落文本的字体大小为14px。
定义<div id="main">包含框内的段落文本的字体大小为12px。

这时可以利用包含选择器来快速定义样式，代码如下：

    #header p { font-size:14px;}
    #main p {font-size:12px;}

3.2、子选择器

子选择器使用尖角号(>)连接两个简单的选择器，前面选择器表示包含的父对象，后面选择器表示被包含的子对象。

优点：相对于包含选择器，匹配的范围更小，从层级结构上看，匹配目标更明确。
缺点：相对于包含选择器，匹配范围有限，需要熟悉文档结构。

【示例】新建网页文档，在<body>标签内输入如下结构：

    <h2><span>虞美人·春花秋月何时了</span></h2>
    <div><span>春花秋月何时了？往事知多少。小楼昨夜又东风，故国不堪回首月明中。雕栏玉砌应犹在，只是朱颜改。问
君能有几多愁？恰似一江春水向东流。 </span></div>

在<head>标签内添加<style type="text/css">标签，在内部样式表中定义所有span元素的字体大小为18px，再用子选择器定义h2元素包含的span子元素的字体大小为28px。

    span { font-size: 18px; }
    h2 > span { font-size: 28px; }

完整代码：

<html>
  <head>
    <style type="text/css">
       span { font-size: 18px; }
       h2 > span { font-size: 28px; }
	</style>
  </head>
  
   <body>
          <h2><span>虞美人·春花秋月何时了</span></h2>
          <div><span>春花秋月何时了？往事知多少。小楼昨夜又东风，故国不堪回首月明中。雕栏玉砌应犹在，只是朱颜改。问
            君能有几多愁？恰似一江春水向东流。
		 </span></div>
   </body>
</html>

在这里插入图片描述

3.3、相邻选择器

相邻选择器使用加号(+)连接两个简单的选择器，前面选择器指定相邻的前面一个元素，后面选择器指定相邻的后面一个元素。

优点：在结构中能快速、准确地找到同级、相邻元素。
缺点：使用前要熟悉文档结构。

示例：通过相邻选择器快速匹配标题下面相邻的p元素，并设计其包含的文本居中显示，代码如下：

<html>
  <head>
    <style type="text/css">
       h2, h2 + p { text-align: center; }
	</style>
  </head>
  
   <body>
        <h2>虞美人·春花秋月何时了</h2>
		<p>李煜 </p>
		<p>春花秋月何时了？往事知多少。小楼昨夜又东风，故国不堪回首月明中。 </p>
		<p>雕栏玉砌应犹在，只是朱颜改。问君能有几多愁？恰似一江春水向东流。 </p>
   </body>
</html>

效果如下图所示：
在这里插入图片描述
如果不使用相邻选择器，用户需要使用类选择器来设计，这样就相对麻烦很多。

3.4、兄弟选择器

兄弟选择器使用波浪符号(~)连接两个简单的选择器，前面选择器指定同级的前置元素，后面选择器指定其后同级所有匹配的元素。

优点：在结构中能够快速、准确地找到同级靠后的元素。
缺点：使用前需要熟悉文档结构，匹配精度没有相邻选择器具体。

示例：定义标题后面所有段落文本的字体大小为14px，字体颜色为红色。

<html>
  <head>
    <style type="text/css">
       h2, h2 + p { text-align: center; }
       h2 ~ p { font-size: 14px; color:red; }
	</style>
  </head>
  
   <body>
        <h2>虞美人·春花秋月何时了</h2>
		<p>李煜 </p>
		<p>春花秋月何时了？往事知多少。小楼昨夜又东风，故国不堪回首月明中。 </p>
		<p>雕栏玉砌应犹在，只是朱颜改。问君能有几多愁？恰似一江春水向东流。 </p>
   </body>
</html>

在这里插入图片描述

3.5、分组选择器

分组选择器使用逗号(,)连接两个简单的选择器，前面选择器匹配的元素与后面选择器匹配的元素混合在一起作为分组选择器的结果集。

优点：可以合并相同样式，减少代码冗余。
缺点：不方便个性管理和编辑。

【示例】使用分组选择器给所有标题元素统一样式。

    h1, h2, h3, h4, h5, h5, h6 {
        margin: 0;                     /* 清除标题的默认外边距 */
        margin-bottom: 10px;           /* 使用下边距拉开标题距离 */
    }

4、属性选择器

属性选择器是根据标签的属性来匹配元素的，使用中括号进行定义。

    [属性表达式]

CSS3包括7种属性选择器形式，下面结合示例具体说明。

4.1、E[attr]

选择具有attr属性的E元素。例如：

    .nav a[id] {background: blue; color:yellow;font-weight:bold;}

上面代码表示：选择div.nav下所有带有id属性的a元素，并在这个元素上使用背景色为蓝色，前景色为黄色，字体加粗的样式。对照上面的HTML结构，不难发现，只有第一个和最后一个链接使用了id属性，所以选中了这两个a元素，效果如下图所示。
在这里插入图片描述
也可以指定多属性：

    .nav a[href][title] {background: yellow; color:green;}

上面代码表示选择div.nav下具有href和title两个属性的a元素，效果如下图所示。
在这里插入图片描述

4.2、E[attr=“value”]

选择具有attr属性，且属性值等于value的E元素。例如：

    .nav a[id="first"] {background: blue; color:yellow;font-weight:bold;}

选中div.nav中的a元素，且这个元素有一个id="first"属性值，预览效果如下图所示。
在这里插入图片描述

E[attr=“value”]属性选择器也可以多个属性并写，以进一步缩小选择范围，用法如下所示，预览效果如下图所示。

    .nav a[href="#1"][title] {background: yellow; color:green;}

在这里插入图片描述

4.3、E[attr~=“value”]

选择具有attr属性，且属性值为一空格分隔的字词列表，其中一个等于value的E元素。包含只有一个值，且该值等于val的情况。例如：

    .nav a[title~="website"]{background:orange;color:green;}

在div.nav下的a元素的title属性中，只要其属性值中含有website就会被选择，结果a元素中2、6、7、8这4个a元素的title中都含有，所以被选中，如下图所示。
在这里插入图片描述

4.4、E[attr^=“value”]

选择具有attr属性，且属性值为以value开头的字符串的E元素。例如：

    .nav a[title^="http://"]{background:orange;color:green;}
    .nav a[title^="mailto:"]{background:green;color:orange;}

上面代码表示选择了title属性，并且以"http://"和"mailto:"开头的属性值的所有a元素，匹配效果如下图所示。
在这里插入图片描述

4.5、E[attr$=“value”]

选择具有attr属性，且属性值为以value结尾的字符串的E元素。例如：

    .nav a[href$="png"]{background:orange;color:green;}

上面代码表示选择div.nav中元素具有href属性，并以png结尾的a元素。

4.6、E[attr*=“value”]

选择具有attr属性，且属性值为包含value的字符串的E元素。例如：

    .nav a[title*="site"]{background:black;color:white;}

上面代码表示选择div.nav中a元素的title属性中只要有site字符串就可以，预览效果如下图所示。
在这里插入图片描述

4.7、E[attr|=“value”]

选择具有attr属性，其值是以value开头，并用连接符"-"分隔的字符串的E元素；如果值仅为value，也将被选择。例如：

    .nav a[lang|="zh"]{background:gray;color:yellow;}

上面代码会选中div.nav中lang属性等于zh或以zh-开头的所有a元素，如下图所示。
在这里插入图片描述

5、伪类选择器

伪类选择器是一种特殊的类选择器，它的用处就是可以对不同状态或行为下的元素定义样式，这些状态或行为是无法通过静态的选择器匹配的，具有动态特性。

5.1、伪选择器概述

伪选择器包括伪类选择器和伪对象选择器。伪选择器能够根据元素或对象的特征、状态、行为进行匹配。

伪选择器以冒号(：)作为前缀标识符。冒号前可以添加限定选择符，限定伪类应用的范围，冒号后为伪类和伪对象名，冒号前后没有空格。
CSS伪类选择器有两种用法方式：
1、单纯式的用法： E:pseudo-class { property:value}其中，E为元素，pseudo-class为伪类名称，property是CSS的属性，value为CSS的属性值。例如： a:link {color:red;}
2、混用式的用法： E.class:pseudo-class{property:value}其中，.class表示类选择符。把类选择符与伪类选择符组成一个混合式的选择器，能够设计更复杂的样式，以精准匹配元素。例如： a.selected:hover {color: blue;}

由于CSS3伪选择器众多，下面仅针对CSS3中新增的伪类选择器进行说明。

5.2、结构伪类选择器

结构伪类选择器是根据文档结构的相互关系匹配特定的元素，从而减少文档元素的class属性和ID属性的无序设置，以使文档更加简洁。

结构伪类形式多样，但用法固定，以便设计各种特殊样式的效果。结构伪类主要包括以下几种，简单说明如下所示：

:fist-child：第一个子元素。
:last-child：最后一个子元素。
:nth-child()：按正序匹配特定子元素。
:nth-last-child()：按倒序匹配特定子元素。
:nth-of-type()：在同类型中匹配特定子元素。
:nth-last-of-type()：按倒序在同类型中匹配特定子元素。
:first-of-type：第一个同类型子元素。
:last-of-type：最后一个同类型子元素。
:only-child：唯一子元素。
:only-of-type：同类型的唯一子元素。
:empty：空元素。

5.3、否定伪类选择器

:not()表示否定选择器，即过滤掉not()函数匹配的特定元素。

【示例】为页面中所有段落文本设置字体大小为24px，然后使用:not(.author)排出第一段文本，设置其他段落文本的字体大小为14px

    <style type="text/css">
    p { font-size: 24px; }
    p:not(.author){ font-size: 14px; }
    </style>
    <h2>虞美人·春花秋月何时了</h2>
    <p class="author">李煜 </p>
    <p>春花秋月何时了？往事知多少。小楼昨夜又东风，故国不堪回首月明中。 </p>
    <p>雕栏玉砌应犹在，只是朱颜改。问君能有几多愁？恰似一江春水向东流。 </p>

效果如下所示：
在这里插入图片描述

5.4、状态伪类

CSS包含3个UI状态类选择器，简单说明如下：

: enabled：匹配指定范围内所有可用UI元素。
:disabled：匹配指定范围内所有不可用UI元素。
:checked：匹配指定范围内所有可用UI元素。

5.5、目标伪类选择器

目标伪类选择器的类型形式如E:target，它表示选择匹配E的所有元素，且匹配元素被相关URL指向。该选择器是动态选择器，只有当URL指向该匹配元素时，样式效果才有效。

【示例】设计当单击页面中的锚点链接，页面跳转到指定标题位置时，该标题会自动高亮显示，以提醒用户当前跳转的位置，代码如下：

    <style type="text/css">
    /* 设计导航条固定在窗口右上角位置显示 */
    h1{ position:fixed; right:12px; top:24px;}
    /* 让锚点链接堆叠显示*/
    h1 a{ display:block;}
    /* 设计锚点链接的目标高亮显示*/
    h2:target { background:hsla(93,96%,62%,1.00); }
    </style>
    <h1><a href="#p1">图片1</a> <a href="#p2">图片 2</a> <a href=
"#p3">图片3</a> <a href="#p4">图片4</a> </h1>
    ……

在这里插入图片描述

5.6、动态伪类选择器

动态伪类选择器是一种行为类样式，只有当用户与页面进行交互时才有效。动态伪类选择器包括如下两种形式。

锚点伪类选择器，如:link、:visited。
行为伪类选择器，如:hover、:active和:focus。

6、伪对象选择器

伪对象选择器主要针对不确定对象定义样式，如第一行文本、第一个字符、前面内容、后面内容。这些对象具体存在，但又无法具体确定，需要使用特定类型的选择器匹配它们。

伪对象选择器以冒号(：)作为语法标识符。冒号前可以添加选择符，限定伪对象应用的范围，冒号后为伪对象名称，冒号前后没有空格。语法格式如下：

:伪对象名称

CSS3新语法格式如下：

   ::伪对象名称

提示：伪对象前面包含两个冒号，主要是为了与伪类选择器进行语法区分。

【示例】使用:first-letter伪对象选择器设置段落文本第一个字符放大下沉显示，并使用:first-line伪对象选择器设置段落文本第一行字符放大带有阴影显示，代码如下：

    <style type="text/css">
    p{ font-size:18px; line-height:1.6em;}
    p:first-letter {/* 段落文本中第一个字符样式 */
        float:left;
        font-size:60px;
        font-weight:bold;
        margin:26px 6px;
    }
    p:first-line {/* 段落文本中第一行字符样式 */
        color:red;
        font-size:24px;
        text-shadow:2px 2px 2px rgba(147,251,64,1);
    }
    </style>