[前端学习之CSS3]（01）：如何在HTML中使用CSS

HTML学习进度到表单，由于很多表单的例子和练习都会涉及到CSS的使用，先暂停HTML的更新学一下基础的CSS知识。

---

一，CSS概述

CSS，层叠样式表，是一种网页控制技术。  采用CSS技术，可以有效的对页面布局、字体、颜色、背景和其他效果实现更加精准的控制。网页最初是使用html标签定义页面文档及格式，例如标题标签<h1>、段落标签<p>等，但是这些标签无法标满足更多的文档样式需求。现在这些标签已经被HTML5淘汰，我们现在在CSS中进行网页控制。

---

二，CSS规则与语法

1，CSS组成结构

简单地说，CSS3通过几行代码就可以实现很多以前需要使用脚本才能实现的效果，这不仅简化了设计师的工作，而且还能加快页面载入速度。 CSS规则由选择器和声明块组成，其中声明块为一个属性一个值，可以有很多对声明块。  语法格式如下：

selector{property:value}

• selector：选择器。CSS可以通过某种选择器选中需要改变样式的标签。
• property：属性。CSS规则的名称，定义了样式的特征，如颜色、边距、字体等。
• value：值。是属性的设置结果，它指定了应用到选择器的样式的具体外观。
• 声明（Declaration）： 一个声明由一个属性和一个值组成，例如：color: blue;
• 声明块（Block）： 由一个大括号 {} 包围的一组声明组成，定义了应用于选择器的样式规则。
• 规则集（Rule Set）： 由选择器和声明块组成。例如：

  h1 {
    color: blue;
    font-size: 20px;
  }

2，CSS须知

1. CSS注释以 /* 开始，以 */ 结束
2. 优先级（Specificity）： 某些选择器比其他选择器具有更高的优先级，这意味着它们的声明会覆盖其他规则。
3. 继承（Inheritance）： 某些CSS属性可以被子元素继承，这意味着子元素会应用父元素的样式。
4. 重要性（Importance）： 使用 !important 声明可以覆盖其他所有规则，但应谨慎使用。

3， CSS属性

以下是一些最常用的css属性：

（1）布局和定位属性

display：定义元素的显示类型（如块级、行内、表格等）。
position：确定元素的定位方式（如静态、相对、绝对、固定、粘性）。
top、right、bottom、left：与 position 属性一起使用，确定元素的位置。
width、height：设置元素的宽度和高度。
max-width、max-height：设置元素的最大宽度和高度。
min-width、min-height：设置元素的最小宽度和高度。
flex：在Flexbox布局中用于定义空间的分配。
grid：在Grid布局中用于定义网格结构。
justify-content：定义Flexbox或Grid布局中项目在主轴上的对齐方式。
align-items：定义Flexbox或Grid布局中项目在交叉轴上的对齐方式。

（2）文本和字体属性

font-family：设置字体系列。
font-size：设置字体大小。
font-weight：设置字体粗细。
font-style：设置字体风格（如正常、斜体）。
text-align：设置文本的水平对齐方式。
text-decoration：设置文本装饰（如下划线、删除线）。
text-transform：设置文本的大小写（如大写、小写）。
line-height：设置行高。
color：设置文本颜色。
letter-spacing：设置字符间距。
word-spacing：设置单词间距。

（3）背景和边框属性

background-color：设置元素的背景颜色。
background-image：设置元素的背景图像。
background-repeat：设置背景图像的重复方式。
background-position：设置背景图像的位置。
background-size：设置背景图像的大小。
border：简写属性，用于设置元素的边框样式。
border-width、border-style、border-color：分别设置边框的宽度、样式和颜色。
border-radius：设置边框圆角。

（4）间距和填充属性

 margin：简写属性，用于设置元素的外边距。
padding：简写属性，用于设置元素的内边距。
margin-top、margin-right、margin-bottom、margin-left：分别设置元素的上、右、下、左外边距。
padding-top、padding-right、padding-bottom、padding-left：分别设置元素的上、右、下、左内边距。

（5） 其他视觉效果属性

opacity：设置元素的透明度。
visibility：设置元素的可见性。
overflow：设置如何处理元素内容的溢出。
box-shadow：为元素添加阴影效果。
transition：定义过渡效果的持续时间、效果名称和时间函数。

（6）浮动属性（float）

让元素向左或向右浮动，直到它的边缘触及包含框或另一个浮动元素的边缘。

left：元素向左浮动。
right：元素向右浮动。
none：元素不浮动（默认值）。
inherit：元素继承父元素的浮动属性。

（7）响应式设计属性

@media：用于创建媒体查询，以便根据不同的屏幕尺寸和设备特性应用不同的CSS规则。

（响应式设计很多而且很重要，后面会单独讲）

---

三，如何在HTML中使用CSS

1，<div>标签的class属性

首先我们在写HTML文件使用<div>标签给文件内容划分模块时，会用到<div>标签的class属性，它的值没有固定的几种，可以根据自己的需求自由命名。class 属性用于为元素指定一个或多个类名，这些类名可以是任何有效的字符串，只要它们不包含空格、特殊字符（如 :, ;, #, [, ], {, }, <, >, ,, !, =, |, *, / 等），并且最好避免使用数字开头。

命名时应注意：

1. 描述性：类名应该是描述性的，能够清楚地表达其样式或功能。

2. 简洁性：尽量使用简洁的名称，避免过长或复杂的名称。

3. 可维护性：使用一致的命名约定，以便于维护和理解。

4. 避免使用ID作为类名：虽然技术上可行，但最好将 id 和 class 用于不同的目的。

5. 避免使用HTML标签名：不要使用HTML标签名作为类名，如 div, p, span 等。

6. 避免使用特殊字符：使用字母、数字和连字符（-）是最常见的做法。

7. BEM命名法：Block Element Modifier（BEM）是一种流行的命名约定，它有助于创建语义化的类名。  例如，如果你有一个类名为 mr-box，它可能表示一个具有特定样式的盒子元素。这里的 mr- 前缀代表 "my-responsive"，而 box 表示它是一个盒子元素。

2，在HTML中使用CSS

实例：通过实现添加页面背景以及设置文字阴影来演示CSS的使用过程。首先建立一个HTML文件，在HTML文件中通过添加标签，以完成页面的基本内容，代码如下：

<div class="mr-box">
  <div class="mr-shadow1"><h1>三折叠，怎么折，都有面</h1></div>
  <div class="mr-shadow2"><img src="../img/华为.jpg"> </div>
</div>

然后建立一个CSS文件夹，这里先讲解如何创建一个CSS文件。首先进入webstorm，在主菜单选择File→New命令，进入新建文件类型选择页面，选择Stylesheet命令，页面跳转至编辑文件名称页面，在Name一栏中输入文件的名称，然后单击OK，此时一个CSS文件已经创建完成，如图：

需要注意，在给CSS文件命名时尽量用英文，如果想起中文名需要确保HTML文件和CSS文件的UTF-8编码一致，在连接HTML和CSS时也比较麻烦。尽管技术上可行但出于维护和兼容性的考虑，建议使用英文名字的CSS文件。这样可以避免潜在的编码和兼容性问题，特别是在不同的服务器和浏览器环境中。

CSS代码如下：

.mr-box{                   /*设置页面总体样式*/
  width:500px;             /*设置页面大小*/
  margin:0 auto;           /*左右外边距自动居中*/
}

body{                     /*设置页面整体背景颜色*/
  background-color: #b3d4fc;
}


.mr-shadow1{        /* 设置第一部分文字样式 */
  margin-left:100px;               /* 设置文字的左边距 */
  color: blue;                      /* 设置文本颜色 */
  font-family: Arial, sans-serif;   /* 设置字体系列 */
  font-size: 16px;                  /* 设置字体大小 */
  font-weight: bold;                /* 设置字体粗细 */
  line-height: 1.5;                 /* 设置行高 */
}


.mr-shadow2 img{        /* 设置第二部分图片样式 */
  /*如果你想要 .mr-shadow2 类的样式只应用于内部的 <img> 标签，可以使用子选择器*/
  width:600px;
  height: 400px;
}

最后我们需要将写好的CSS文件链接到对应的HTML文件，需要在HTML页面的<head>标签中添加下行代码： 

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

•  href：CSS文件的地址。 其中：

  ☑   如果要引用的文件位于该文件的同一目录下，则只需输入要链接文档的名称，如101.jpg.
  ☑    如果要引用的文件位于该文件的下一级目录中，只需先输入目录名，然后加“ / ”，再输入文件名，如 image/101.jpg。
  ☑   如果要引用的文件位于该文件的上一级目录中，则先输入“ ../ ”，再输入目录名和文件名，如../image/101.jpg。

• type：表示所链接文件的类型。
• rel：表示链接文件与该HTML文件的关系。
• 上述的type和rel属性的值是不需要用户改变的。

 运行：

3， CSS盒模型

CSS盒模型（Box Model）是CSS布局的基础，它定义了元素在页面上是如何显示的。每个元素在CSS中都可以被视为一个盒子，这个盒子由以下几个部分组成：

（1）内容区域（content）

• 这是盒子的核心部分，包含元素的实际内容，如文本、图片或其他媒体内容。
• 由 width 和 height 属性定义其大小。

（2）内边距（padding）

• 内边距是内容区域内部的透明区域，位于内容和边框之间。
• 由 padding-top、padding-right、padding-bottom、padding-left 属性定义，或者使用简写 padding。简写时padding 属性可以接受一个、两个、三个或四个值，这些值分别代表不同的内边距方向。下面代码中有提到并附有讲解。
• 默认值通常为0，但可以通过CSS进行设置。

（3）边距（border）

• 边框围绕在内边距外围，可以设置样式（实线、虚线、点线等）、宽度和颜色。
• 由 border-width、border-style、border-color 属性定义，或者使用简写 border。
• 默认情况下，边框是不可见的，除非明确设置样式和宽度。

（4）外边距（margin）

• 外边距是边框外部的透明区域，用于在元素之间创建空间。
• 由 margin-top、margin-right、margin-bottom、margin-left 属性定义，或者使用简写 margin。
• 外边距可以是正数（元素分开）、负数（元素重叠）或零。

（5）注意事项

• 外边距可以重叠，特别是在垂直方向上，这被称为外边距折叠。
• 内边距和边框不会重叠。
• 盒模型的理解对于布局和设计像素完美的页面至关重要。

实例：

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
  box-sizing: border-box;
}

在这个例子中，.box 类定义了一个盒子，其内容区域的尺寸为200px x 100px，内边距为20px，边框宽度为5px，外边距为10px。如果使用 content-box，则总宽度和高度会超过200px和100px，因为内边距和边框会被添加到这些值上。如果使用 border-box，则内容区域会减小，以确保总尺寸为200px x 100px。

---

四，CSS选择器

CSS选择器是CSS规则的第一部分，它们决定了哪些HTML元素将受到声明的影响。前面实例中我们了解了 CSS可以改变HTML中标签的样式，那么CSS是如何改变它的样式的呢?

简单地说，就是告诉CSS的3个问题：改变谁、改什么、怎么改。

1. 告诉CSS改变谁时就需要用到选择器。选择器是用来选择标签的方式，例如，ID选择器就是通过ID来选择标签，类选择器就是通过类名选择标签。
2. 改什么，就是告诉CSS改变这个标签的什么属性。
3. 怎么改，则是指定这个属性的属性值。

举个例子，如果我们要将HTML 中所有<p>标签的文字变成红色，我们需要通过标签选择器告诉 CSS 要改变所有<p>标签，改变它的颜色属性，改为红色。清楚了这3个问题，CSS就可以乖乖地为我们服务了。

CSS选择器主要分别四大类，分别为属性选择器、ID选择器、类选择器、伪类选择器，和其他选择器，以下是常见的CSS选择器及其介绍：

1，属性选择器

 属性选择器就是通过属性来选择标签，这些属性既可以是标准属性（HTML中默认该有的属性，例如，<input>标签中的type属性)，也可以是自定义属性.

 HTML中通过各种各样的属性可以给元素增加很多附加信息，例如，在一个HTML页面中插入多个<p>标签，并为每个<p>标签设定不同的属性。实例代码如下：

<p font="fontsize">流浪地球</p>    <!--设置font属性的属性值为fontsize-->
<p color="red">朝花夕拾</p>        <!--设置color属性的属性值为red-->
<p font="fontsize">我是猫</p>     <!--设置font属性的属性值为fontsize-->
<p color="green">人间失格</p>      <!--设置color属性的属性值为green-->
<p color="green">罗生门</p>       <!--设置color属性的属性值为green-->

此时如果运行代码会发现段落的大小和颜色全部是默认的，这是因为在HTML中为标签添加属性之后，还要在CSS3中使用属性选择器选择对应的标签，来改变样式。

在使用属性选择器时，需要 声明属性与属性值。声明方法如下：

[att=val]{}

• 其中，alt代表属性，val代表属性值。

 以下代码可以为相应的<p>标签设置样式：

[color=red]{         /* 选择所有color属性的属性值为red的标签 */
  color:red;         /* 设置其字体颜色为红色 */
}

[color=green]{      /* 选择所有color属性的属性值为green的标签 */
  color:green;      /* 设置其字体颜色为绿色 */
}

[font=fontsize]{     /* 选择所有font属性的属性值为fontsize的标签 */
  font-size:20px;    /* 设置其字体大小为20像素 */
}

• 给元素定义属性和属性值时，可以定义任意属性，但是要尽量做到“见名知意”，也就是说，我们看到这个属性名和属性值，自己立刻就能看明白设置这个属性的用意。

运行：

 

 2，类选择器

类选择器则基于元素的 class 属性来选择元素。它使用一个点（.）作为前缀，后面跟着类名。

• 根据元素的 class 属性选择元素,  语法格式如下：

.intro{color:red;}

实例： 

.my-class {
  font-size: 16px;
}

• 在这个例子中，.my-class 是一个类选择器，它会匹配文档中所有具有 class="my-class" 属性的元素，并将文本的字体大小设置为 16 像素。

3，ID选择器 

• 根据元素的 id 属性选择元素，ID在同一个页面中应该是唯一的。  语法格式如下：

#intro{color:red;}

上一个类选择器和ID选择器比较类似，不过也有一些主要差别，如：

1. ID选择器前面有一个“#”号； 类选择器前面有一个“.”号。
2. ID选择器引用id属性的值； 类选择器应用class属性的值。
3. 一个网页中标签的class属性可以定义多个，而id属性只能定义一个。

  实例：通过类选择器和ID选择器实现一个商城网页的爆款特卖板块，主要实现步骤如下：

（1）新建一个HTML文件，在该文件中，首先通过<div>标签对页面进行布局，然后通过<img>标签和<p>标签添加手机的图片、价格、型号等文字。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<link href="../css/xzq.css" rel="stylesheet"type="text/css">
  <meta charset="UTF-8">
  <title>类和ID选择器</title>
</head>
<body>

<div id="mr-content">
  <div class="mr-top">爆款特卖</div>

  <div class="mr-bottom">
    <div class="mr-blok1">
      <img src="../img/头像1.jpg" class="mr-img">
      <p class="mr-title">华为Mate8</p>
      <div>
        <div class="mr-mon">¥2998.00</div>
        <div class="mr-minute">秒杀</div>
      </div>
    </div>


    <div class="mr-blok1">
      <img src="../img/头像2.jpg" class="mr-img">
      <p class="mr-title">华为Mate9</p>
      <div>
        <div class="mr-mon">¥4798.00</div>
        <div class="mr-minute">秒杀</div>
      </div>
    </div>
  </div>
</div>


</body>
</html>

（2）新建一个CSS3文件，通过外部样式引入HTML文件中，然后使用ID选择器和类选择器设置图片和文字的大小、位置等，代码如下：

/*在页面中只有一个mr-content，所以使用ID选择器*/
/*ID属性只能定义一个*/
#mr-content{
  width:700px;         /*设置大容器尺寸*/
  height:400px;
  margin:0 auto;      /*设置内容在浏览器中自适应（在父容器中水平居中）*/
                      /*是一个常用的水平居中技巧*/
  background: #d5d7da;
  border: 1px solid #00bbff;
  text-align: left;    /*设置元素内的文本向左对齐*/
}


.mr-top{                /*设置标题“热卖爆款”属性*/
  width: 1070px;           /*设置宽度*/
  height: 60px;            /*设置高度*/
  padding:20px 0 0 10px;   /*设置元素的内边距，即元素内容与元素边框之间的空间*/
                           /*该属性接受四个值，分别代表上、右、下、左的内边距*/

  color: green;            /*设置字体颜色*/
  font-size: 32px;         /*设置字体大小*/
  font-weight: bolder;     /*设置内字体粗细*/
}

.mr-bottom{         /*设置的是图片+文字横向一排的容器大小*/
  width: 1200px;      /*设置内容部分宽度*/
  height:340px;       /*设置内容部分高度*/
}

.mr-blok1{        /*设置每个小盒子的容器大小*/
  width:260px;
  height:310px;
  float:left;            /*设置元素浮动到容器左侧*/
  text-align:center;
  margin-left:10px;       /*设置向左的外边距*/
  background: #ffffff;    /*设置白色背景*/
}

.mr-img{
  width:190px;
  height:200px;
}

●17行：padding属性用于设置元素的内边距，即元素内容与其边框之间的空间。padding 属性可以接受一个、两个、三个或四个值，这些值分别代表不同的内边距方向。

1. 一个值：这个值将应用于元素的四个方向，即上、右、下、左的内边距都将相同。
2. 两个值：第一个值应用于上和下方向，第二个值应用于右和左方向。
3. 三个值：第一个值应用于上方向，第二个值应用于右和左方向（两者相同），第三个值应用于下方向。
4. 四个值：分别应用于上、右、下、左方向的内边距。

●33行：float:left;让元素浮动到容器的左侧，这行代码至关重要，影响整个页面的布局。

运行效果如图：

4，伪类和伪元素选择器

伪类选择器是CSS中用于向特定元素的特定状态添加样式的语法，伪类不是元素的实际类，而是基于元素的特定状态或行为。当我们浏览网页时经常遇到一种情况，就是每当鼠标放在某个元素上，这个元素就会发生一些变化，例如：当鼠标划过导航栏时，会展开导航栏里的内容。这些特效的实现都离不开伪类选择器，而伪类选择器则是用来表示使用普通标记无法轻易修改的部分。

（1）伪类选择器

 伪类选择器又称“页面选择器”。伪类选择器是CSS3中已经定义好的选择器，因此程序员不能随意命名，它是用来对某种特殊状态的目标元素应用样式，比如：用户正在单击的元素，或者鼠标正在经过的元素等。

伪类选择器主要有以下四种：

• ：link   ：表示对未访问的超链接应用样式。
• ：visited  ：表示对已访问过的超链接应用样式。
• ：hover  ：表示对鼠标悬停时的元素应用样式。
• ：active  ：表示对用户正在单击的元素应用样式。

！在使用伪类选择器时，它在样式表中的顺序是非常重要的，如果顺序不当，程序员可能无法达到希望的样式。他们的正确顺序是： :hover伪类必须定义在:link和:visited两个伪例之后，而:active伪类必须在:hover之后。

为了方便记忆，可以采用“爱恨原则”，即 “ L(:link)oV(:visited)e，H(:hover)A(:actived)te ”

· 还有很多不常用的伪类选择器表，全部列举在下方表格，大家可以做下了解：

伪类选择器	作用于	实例
：link	对未访问的超链接应用样式	a:link { color: blue; }
：visited	对已访问过的超链接应用样式	a:visited { color: purple; }
：hover	对鼠标悬停时的元素应用样式	a:hover { color: red; }
：active	对用户正在单击的元素应用样式	button:active { background-color: blue; }
：focus	元素获得焦点时（如表单输入字段）	input:focus { border-color: green; }
：first-child	选择其父元素的第一个子元素	p:first-child { font-weight: bold; }
：last-child	选择其父元素的最后一个子元素	p:last-child { margin-bottom: 0; }
: nth-child(n)	选择父元素的特定子元素， n 可以是数字、关键字或公式	p:nth-child(2) { color: green; }
:nth-of-type(n)	选择特定类型的元素， 基于它们的位置	img:nth-of-type(3) { border: 1px solid black; }
:checked	选择被勾选的单选按钮或复选框	input:checked { background-color: yellow; }
: enabled	选择可用（未被禁用）的表单元素	input:enabled { color: black; }
:disabled	选择不可用（被禁用）的表单元素	input:disabled { color: grey; }
:empty	选择没有子元素的元素	p:empty { display: none; }
::first-letter	选择元素的第一封字母	p::first-letter { font-size: 2em; }
::first-line	用于选择元素的第一行文本	p::first-line { font-weight: bold; }

（2）伪元素选择器

 伪元素选择器是用来改变文档中特定部分的效果样式，允许你选择元素的特定部分，并为其添加特殊的样式，而这一部分是通过普通的选择器无法定义到的部分（无法通过标签来实现）。

伪元素选择器通过 在普通选择器后加上冒号 : 和关键词 来使用。例如 ::before 和 ::after。

以下是一些常用的CSS伪元素选择器：

伪元素选择器	作用
::before	1，在指定元素的内容前面插入内容。 2，通常与 content 属性一起使用来插入文本或图像。
::after	1，在指定元素的内容后面插入内容。 2，同样，通常与 content 属性一起使用。
::first-letter	选择元素的第一个字母，用于为首字母添加特殊样式。
::first-line	选择元素的第一行文本，用于为第一行文本添加特殊样式。
::selection	选择用户选择的元素部分，即当用户用鼠标或键盘选择文本时的样式。

注意事项：

• 伪元素通常用于装饰性内容，如添加前缀、后缀、特殊形状或高亮显示。
• content 属性与伪元素一起使用，可以插入文本、图像或空白。
• 伪元素可以用于创建视觉效果，如三角形箭头、高亮显示、自定义项目符号等。
• 伪元素在CSS3中得到了扩展，包括 ::backdrop、::marker、::placeholder 等，但这些可能不被所有浏览器支持。

实例：用<p>标签随便打了几行字，看看啥效果

<p>我的鹅湖给对方私自飞机上根据分公司见附件舒服金色华府金色部分金额不</p>

<p>方式大公司</p>
<p>党费的部分四个</p>
<p>是非得失公司东莞市</p>
<p>大幅度发否</p>

CSS使用伪元素选择器添加样式：

/* 为首字母添加样式 */
p::first-letter {
  font-size: 3em;
  color: blue;
}

/* 为第一行文本添加样式 */
p::first-line {
  font-variant: small-caps;
}

/* 为用户选择的文本添加样式 */
p::selection {
  background-color: yellow;
  color: black;
}

运行：可以看到首字母变为3em，大小为蓝色，第一行文本样式变为small-caps小首都风格，用户鼠标选择部分文本时会变成黄色。

5，通用选择器

通用选择器在CSS中用星号（*）表示，它可以匹配文档中的所有元素。当你想要为页面上的所有元素设置统一的样式时，比如重置浏览器默认的样式，使用通用选择器十分方便。

• *：选择所有元素。

* {
  margin: 0;     /*元素外边框*/
  padding: 0;    /*元素内边距*/
}

6，类型选择器

类型选择器，也称为元素选择器或标签选择器，是基于HTML元素的类型来选择元素的CSS选择器。它直接使用元素的标签名作为选择器，匹配文档中所有该类型的元素。

• 根据元素的类型（标签名）选择元素。

p {
  color: blue;
}

• 此时p 是一个类型选择器，它会匹配文档中的所有 <p> 元素，并将它们的文本颜色设置为蓝色

7，其他选择器：

在CSS3中除了上面所介绍的选择器以外，还有很多其他的选择器，灵活运用这些选择器可以完成一些意想不到的页面效果，下面列举了一些其他的选择器。

（1）关系选择器：

关系选择器用于将不同的简单选择器组合在一起，以创建更复杂的选择器模式。

关系选择器	作用	实例
后代选择器 (包含选择器)	1，使用空格表示。 2，选择指定元素的所有后代元素	div p ：选择所有在 <div> 元素内的 <p> 元素
子元素选择器 (子包含选择器)	1，使用大于号 > 表示。 2，选择作为指定元素直接子元素的元素	div > p ：选择所有直接在 <div> 元素内的 <p> 元素
相邻兄弟选择器	1，使用加号 + 表示。 2，选择紧随指定元素之后的相邻兄弟元素。	h1 + p ：选择紧随 <h1> 元素之后的 <p> 元素。
通用兄弟标签选择器	1，使用波浪线 ~ 表示。 2，选择指定元素之后的所有兄弟元素。	h1 ~ p ：选择所有在 <h1> 元素之后的 <p> 元素。
:lang()伪类选择器	指定显示内容的语言类型	E:lang(fr) ：选择匹配E的标签，且该标签显示内容的语言类型为fr
用户操作伪类选择器	主要用于响应用户的交互行为	E:focus ：选择匹配E的标签，且匹配标签获得了焦点

（2）组合器：

在CSS中，组合器（Combinators）是用于连接选择器的符号，它们决定了选择器之间的关系。组合器不是选择器，而是一种选择器的使用方法。当你想要为多个选择器应用相同的样式时，可以将它们组合在一起。

• 使用逗号 , 将不同的选择器分隔开。
• 实例：

  h1, h2, p {
    color: navy;          /* 设置文本颜色为海军蓝 */
    font-family: Arial, sans-serif; /* 设置字体为Arial，或sans-serif作为备用 */
    margin-bottom: 10px;  /* 设置元素底部的外边距为10像素 */
  }

  这段代码使用了逗号组合器，将 h1、h2 和 p 选择器组合在一起，并应用了相同的样式规则。这意味着所有的 <h1>、<h2> 和 <p> 元素都将具有相同的文本颜色、字体和底部外边距。

（3）行和列选择器

在CSS中，行选择器和列选择器通常指的是用于选择表格行和列的特定元素的选择器。

 ● 行选择器：

1，:nth-child()：选择父元素的特定子元素，可以是奇数 (odd) 或偶数 (even)，也可以是特定的数字或公式。实例：

table tr:nth-child(2n+1) {
  background-color: red;
}

• 这段代码将选择所有奇数行的表格行。

2，:first-child：选择其父元素的第一个子元素。实例：

table tr:first-child {
  background-color: blue;
}

• 这段代码将选择每个表格的第一个行。

● 列选择器：

1，:nth-of-type()：选择父元素中特定类型的子元素，可以是奇数 (odd) 或偶数 (even)，也可以是特定的数字或公式。实例：

table td:nth-of-type(3) {
  background-color: green;
}

• 这段代码将选择每个表格的第三列的单元格。

2，:first-of-type：

 选择父元素中特定类型的首个子元素。实例：

table td:first-of-type {
  background-color: yellow;
}

• 这段代码将选择每个表格行的第一个单元格。

（4）否定伪类

1，否定伪类选择器 :not() 是 CSS 中的一个非常有用的选择器，它允许你选择不符合特定条件的元素。换句话说，它可以用来排除某些元素，不对其应用样式。

语法格式如下：

:not(选择器) {

}

• :not()：否定伪类选择器的关键字。
• 选择器：你想要排除的选择器。

实例：假设你想要为所有的 <div> 元素设置样式，除了类名为 special 的 <div> 元素，可以使用 :not() 伪类选择器：

div:not(.special) {
  background-color: blue;
}

• 在这个代码中，所有没有 special 类的 <div> 元素将具有蓝色背景。

2， 我们也可以在 :not() 中使用多个选择器，用逗号分隔：

div:not(.special, .highlight) {
  background-color: blue;
}

•  这里，所有既不是 special 类也不是 highlight 类的 <div> 元素将具有蓝色背景。

3，注意事项：

• :not() 是一个性能相对较低的操作，因为它需要检查每个元素是否符合排除条件。
• 在使用 :not() 时，确保你了解它的工作原理，以避免意外地排除了你想要样式化的元素。
• :not() 是 CSS3 的一部分，得到了现代浏览器的广泛支持。

实例：我们最后做一个实例，综合使用上述选择器实现一个商城分类板块的界面，主要实现步骤如下：

（1）新建一个HTML文件，通过<ul>无序列表标签和<li>列表项标签添加网页中的导航文字，并且通过<div>标签实现分类板块的布局和样式，关键代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<link href="../css/shangcheng.css"rel="stylesheet"type="text/css">
  <meta charset="UTF-8">
  <title>商城分类板块</title>
</head>
<body>

<nav class="mr-header">
  <ul>
    <li class="mr-li">你好，请登录账号</li>
    <li>我的订单</li>
    <li>我的商城</li>
    <li>商城会员</li>
    <li>企业采购</li>
    <li>客户服务</li>
    <li>网站导航</li>
    <li>手机商城</li>
  </ul>
</nav>
<div class="mr-content">
  <div class="mr-block1">美妆会场</div>
  <div class="mr-block2">女装会场</div>
  <div class="mr-block3">男装会场</div>
  <div class="mr-block4">首饰会场</div>
  <div class="mr-block5">零食会场</div>
  <div class="mr-block6">家居会场</div>
  <div class="mr-block7">珠宝会场</div>
  <div class="mr-block8">电子会场</div>
</div>

</body>
</html>

（2）新建一个CSS3文件，并且通过外部样式引入HTML文件，然后通过类选择器改变导航栏背景颜色以及鼠标划过等样式。部分代码如下：

.mr-header{          /*类选择器。设置网页首部导航栏部分的样式*/
  height: 30px;         /*设置高度为30像素*/
  width: 100%;
  background: #b3d4fc;   /*设置背景颜色为蓝色*/
  color:white;           /*设置字体颜色为白色*/
}

/*使用类选择器和伪类选择器 设置鼠标滑过无序列表第一项时的样式*/
.mr-li:hover{
  color: red;             /*设置鼠标滑过时字体变为红色*/
  background: #999999;    /*设置鼠标滑过时背景变为红色*/
}

nav ul{                 /*后代组合器*/
  width: 1560px;     /*设置<ul>元素的宽度为 1560像素*/
  padding: 0 300px;  /*设置<ul>元素的顶部和底部内边距为0，左右内边距为300像素*/
}

ul li{             /*元素选择器，设置无序列表项的公共样式*/
  height: 28px;         /*设置无序列表项的高度*/
  float: left;           /*每一项都向左浮动*/
  line-height: 30px;     /*设置文本的行高，使其垂直居中显示*/
  text-align: center;    /*水平对齐方式为居中*/
  cursor:pointer;        /*鼠标悬停时，鼠标变为小手状*/
  font-size: 14px;       /*设置字体大小*/
  margin-right: 30px;   /* 在元素的右侧增加30像素的外边距 */
}

ul .mr-li{            /*类选择器，设置无需列表第一项的样式*/
  margin-right: 390px;    /*设置右边距为390像素*/
  float: left;            /*向左浮动*/
}

（3）通过使用伪类选择器和通用兄弟标签选择器设置页面中各板块的宽高以及鼠标划过的样式。关键代码如下：

/* 为所有具有 mr-block 类的 div 设置样式 */
.mr-content div {
  height: 100px;        /*设置高度为100像素*/
  margin-left: 10px;    /*设置左边距为10像素*/
  line-height: 100px;   /*设置行高与高度一致，以便文本垂直居中*/
  background: #a1aac8;  /*设置背景颜色*/
  width: 176px;         /*设置宽度为176像素*/
  float: left;          /*让每个div并排显示*/
}

/* 重置第一个板块的样式 */
.mr-content > .mr-block1 {
  margin-left: 0;       /* 移除左边距 */
}

/* 设置鼠标悬停时的样式 */
.mr-content div:hover {
  opacity: 0.5;         /* 设置透明度 */
  color: #000000;       /* 设置字体颜色 */
}

运行效果：