整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
载说明：原创不易，未经授权，谢绝任何形式的转载
层叠样式表（CSS）是一种强大的样式表语言，可以帮助前端开发人员为简单的网页添加样式。然而，在使用这种样式表语言时，开发人员可能会犯一些错误。这些错误会妨碍开发人员编写高效的代码。本文探讨了一些常见的错误，并为每个错误提供了解决方案。
以下是我们开发人员经常犯的九个最常见的错误；你也犯过其中一些吗？
!important 是 CSS 中的一个关键字，它可以帮助我们将属性值设置为比其他样式选项更重要。例如，如果您将 !important 声明应用于元素样式，那么该样式将覆盖该属性类别的所有其他样式。以下是语法：
selector {
property: value !important;
}例如，如果您有一个标题元素 - h1 ，就像这样：
<h1 class="css-mistake">CSS Mistakes</h1>然后您应用以下样式规则：
h1 {
color: red;
}
.css-mistake {
color: green;
}默认情况下，标题文本的颜色将为“绿色”，因为类选择器具有比元素（标签）选择器更高的CSS特异性选择器。但是使用 !important ，您可以覆盖该样式CSS规则（从而使元素（标签）选择器覆盖类选择器）。通过这种方式，标题文本的颜色将为红色，优先于类选择器设置的绿色。
h1 {
color: red !important;
}过度使用 !important 会导致特异性战争-一种状态，其中样式开始互相覆盖，无法按照样式表的作者定义的方式工作。下一节将通过列举适当使用 !important 的实例来提供解决此问题的方法。
什么时候应该使用？
就像本节标题所说的那样——“过度使用 !important ”，我们在使用这个关键词时必须小心谨慎。只有在迫切需要时才应该节制地使用 !important 。以下是一些使用它的情况：
在进行样式设计时，使用正确的长度单位对于创建响应式设计至关重要。CSS有两类长度单位：绝对单位和相对单位。许多CSS属性，如“宽度”、“高度”、“字体大小”等，都使用单位来表示其值。下面的代码片段给出了单位的使用示例：
selector {
font-size: 14px;
}在上面的代码片段中，我们声明了“font-size”CSS属性，然后给它赋了一个14px的值。
什么是绝对单位？
这些是长度单位，无论渲染媒体如何，都具有固定的值，与设备的屏幕尺寸无关。这些单位非常适合在不同屏幕尺寸上保持元素的相同大小。你可能已经使用过一些标准的绝对单位，如像素 - px, 点 - pt, 英寸 - in, 毫米 - mm, 厘米 - cm, 和派卡 - pc. 绝对单位为我们提供了准确、固定和精确的样式值，但它们不会根据屏幕尺寸进行缩放。绝对单位不适用于实现响应式设计。因此，将它们限制在不需要根据浏览器尺寸或设备屏幕尺寸进行调整的元素上。另一方面，相对单位如其名称所示，是相对于另一个属性（大多数情况下是父元素）的。这些单位具有灵活性，可以根据视口动态增长，适应响应式设计，与绝对单位不同。一些相对单位的例子是百分比（%）- rem, em, 等等。
如何使用相对单位及其解释
了解每个相关单位的重要性，使您具备有效使用它们的知识。以下是一些相关单位及其解释：
% - 这个单位完全依赖于父元素。因此，它是相对于父元素的。例如，如果你将一个元素的宽度设置为80%，它将是父元素宽度的80%。请注意，在以下属性的值中使用百分比：宽度、高度、边距和内边距。
em - 这与父元素的字体大小相关。例如，如果您将元素的字体大小设置为4em，则它将是父元素字体大小的四倍。在处理排版（文本）时使用 em - 这使文本按比例缩放。
rem - 这是相对于根元素的字体大小。通常使用 rem 来实现整个布局的一致样式。
vh - 相对于视口高度的1%。
vw - 相对于视口宽度的1%。
内联样式是一种通过 style 属性将直接样式传递给HTML元素的样式系统。虽然存在这种样式系统，但重要的是要理解它的使用不支持应用程序构建的最佳实践，因为它会创建不可重用的代码。只有在测试或美化简单的HTML文件时才使用内联样式。以下是一些避免使用这种样式系统的原因：
最佳实践
为了克服内联样式的缺点，您必须使用内部样式表（位于 <style> 标签内的样式）或外部样式表来保持您的代码健康和有组织。
不同的浏览器具有各种默认样式，这些样式不同，导致元素的外观不一致。这就是为什么我们必须定义一些样式，以便在其他浏览器上为网页样式提供一致的起点。这些样式被称为“CSS重置”。CSS重置是一种CSS样式，用于删除浏览器默认样式的规则。如果您熟悉CSS，并且在使用过程中有时会注意到某些特定属性的默认样式，如 margin. ，CSS重置可以帮助我们将样式基础调整到一致的水平。以下是使用这些重置的原因：
如何创建自己的CSS重置
这里是要遵循的简单步骤：
* {
margin: 0;
padding: 0;
border: 0;
}上面的代码是一个基本的CSS重置，它针对边距、内边距和边框属性，将每个属性的值设为0。这个过程被称为“标准化过程”，它可以消除浏览器默认的间距和边框。这里有一些在线的CSS重置：
CSS中的单行代码是CSS代码的速记样式。它可以使代码更加清晰和有结构。掌握这些速记技巧将有助于您编写更简洁的代码（将多行代码压缩为单行）。例如，当您想要在所有边缘（上，下，左，右）处对元素边距进行样式设置时，您不需要明确地指定所有属性（如 margin-top, margin-right, margin-bottom, 和 margin-left, ），您可以直接使用边距属性的速记方式。下面的代码解释了这一点：
/* Don't do this */
margin-top: 10px;
margin-bottom: 10px;
margin-right: 15px;
margin-left: 15px;
/* Instead, use Margin Shorthand */
margin: 10px 20px 10px 20px;
/* Margin Shorthand can even be more simplified */
margin: 10px 20px;这些简短的话语带来了许多优点：
CSS选择器可以在外部或内部样式表中定位HTML元素。CSS中有许多选择器方法，包括标签（元素）、类、ID和伪元素。知道何时使用选择器以及何时不使用选择器非常重要。此外，您还必须了解CSS选择器的工作原理。
如何避免使用过于复杂的选择器
如果你在你的样式表中遇到了像下面这样的代码片段，那就意味着你正在使用过于复杂的选择器。
#container > .box > content .section .title p > span .italic {
color: blue;
font-weight: bold;
}以下是避免过于复杂选择器的技巧：
浏览器兼容性很重要，因为你不希望样式在一个浏览器上良好运行，在另一个浏览器上则运行不正常。忽略浏览器兼容性可能会导致用户在不同浏览器上的体验不一致。这是因为不同的浏览器有其自己的CSS样式渲染方式。但是，你可以通过考虑浏览器兼容性并确保你的样式与不同浏览器兼容来实现样式一致性。实现浏览器兼容性代码的一种方法是实施以下操作：
使用供应商前缀：某些CSS属性需要您使用前缀来渲染，无论使用哪种浏览器。需要这些前缀的浏览器包括Internet Explorer，Mozilla Firefox和Safari。这些前缀被称为供应商前缀，因为它们是特定类型的浏览器独有的。前缀的示例： -webkit-, -moz-, 和 -ms-. 。
/* webkit-prefixed version - used by browsers that use the WebKit layout engine, such as Chrome and Safari- */
-webkit-border-radius: 8px;
/* ms-prefixed version -used by browsers that use the Microsoft layout engine, such as Internet Explorer. */
-ms-border-radius: 10px;
/* standard version */
border-radius: 8px;声明字体回退：在为“font-family”等属性分配值时，您必须添加回退字体。如果自定义字体不可用，回退字体将是实施的选项之一。
利用Can I Use网站检查CSS属性在各种浏览器中的兼容性。（https://caniuse.com/）
Hex码是颜色的十六进制表示。它是一个由“#”符号前缀的6位代码，后跟三对十六进制数字，其中第一对表示红色值，第二对表示绿色值，最后一对表示蓝色值。语法：
使用直接的颜色关键词有一些限制：
颜色名称在不同的浏览器中是不一致的。例如，如果你将颜色属性设置为绿色，不同的浏览器对其解释的方式也会有所不同。因此，不同浏览器之间的渲染是不一致的。
颜色名称受到限制，因为您无法调整它们的色调、阴影等。
颜色名称的选择有限。由于使用颜色名称的限制，我们需要选择使用十六进制代码，这些代码没有这些限制。以下是十六进制代码比颜色关键字更合适的原因：
寻找十六进制代码的高效方法
以下是获取十六进制代码的几种方法：
使用0px替代0：毫无疑问，这可能不会对样式表产生影响，但为了最佳实践，请确保使用0而不是0px。
selector {
/*Don't do this*/
padding: 10px 12px 15px 0px;
/*Do this*/
padding: 10px 12px 15px 0;
}设置高的z-index值：给 z-index 分配高值是非常不必要和过度的。迟早，这将在你的样式表中造成问题，特别是当 z-index. 有多个实现时。
selector {
/*Don't do this*/
z-index: 50;
/*Do this*/
z-index: 2; /*Let the value be minimal*/
}
本文深入探讨了常见的CSS错误，并为每个错误提供了深入的解决方案。通过阅读本指南，毫无疑问您已经了解了一些常见的CSS错误，并且从此以后，您将知道如何解决它们，因为我们还要研究每个错误的解决方案。
由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。
视觉格式化模型，大体上将页面中盒子的排列分为三种方式：
1. 常规流
2. 浮动
3. 定位
1. 文字环绕
字体环绕
2. 横向排列
修改float属性值为：
- left：左浮动，元素靠上靠左
- right：右浮动，元素靠上靠右
默认值为none
1. 当一个元素浮动后，元素必定为块盒(更改display属性为block)
2. 浮动元素的包含块，和常规流一样，为父元素的内容盒
1. 宽度为auto时，适应内容宽度
2. 高度为auto时，与常规流一致，适应内容的高度
3. margin为auto，为0.
4. 边框、内边距、百分比设置与常规流一样
1. 左浮动的盒子靠上靠左排列
2. 右浮动的盒子考上靠右排列
3. 浮动盒子在包含块中排列时，会避开常规流块盒
4. 常规流块盒在排列时，无视浮动盒子
5. 行盒在排列时，会避开浮动盒子
6. 外边距合并不会发生
> 如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫做匿名行盒。
高度坍塌的根源：常规流盒子的自动高度，在计算时，不会考虑浮动盒子
清除浮动，涉及css属性：clear
- 默认值：none
- left：清除左浮动，该元素必须出现在前面所有左浮动盒子的下方
- right：清除右浮动，该元素必须出现在前面所有右浮动盒子的下方
- both：清除左右浮动，该元素必须出现在前面所有浮动盒子的下方
层叠样式表(英文全称：Cascading Style Sheets) *层叠：多个样式可以作用在同一个html的元素上，同时生效
是一种用来表现HTML或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS很像化妆，通过不同的CSS将同样的HTML内容打造为不同的呈现结果。
所以，前端程序员相互表白的时候可以说：you are the CSS to my HTML.
这是不是CSS是对HTML进行美化和布局作用的最好总结？
根据定义CSS的位置不同，分为行内样式、内部样式和外部样式
也称为内联样式
直接在标签中编写样式，通过使用标签内部的style属性；
一般在测试的时候使用居多：
语法：
<html标签 style="样式1：值1;样式2：值2;....样式N：值N;">hello my css</html标签>
案例：
<div style="color: red;">hello my css</div>弊端：只能对当前的标签生效，没有做到内容和样式相分离，耦合度太高。
定义在head标签内，通过style标签，该标签内容就是CSS代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内部样式</title>
<style>
div{
color: red;
}
</style>
</head>
<body>
<div>hello my css</div>
</body>
</html>1、提前定义css资源文件
2、在head标签内，定义link标签引入外部样式文件。
lina.css文件，放在与html页面同级的css文件夹中：
div {
color: red;
}
html页面中的引入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外部样式</title>
<link rel="stylesheet" href="css/lina.css" />
</head>
<body>
<div>hello my css</div>
</body>
</html>作用域的范围:外部样式表>内部样式表>行内样式表
优先级：外部样式表<内部样式表<行内样式表;
同样的样式作用在同一个标签身上：就近原则；不同样式作用在同一个标签身上:叠加生效。
基本格式：由两个主要的部分构成：选择器，以及一条或多条声明:
选择器 {
属性1:值1;
属性2:值2;
...
}
选择器:筛选具有相似特征的元素
属性和属性值之间用冒号分割，不同的属性之间用分号隔开。例如：
注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。
CSS注释以 /* 开始, 以 */ 结束
/*这是CSS的注释*/
div {
color: red; /*文字颜色是红色*/
}选择具有相同id属性值的元素，建议html页面中的id值唯一
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
PS： ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
虽然多个元素可以使用同一个id选择器控制样式，但是不推荐。如果需要同样的样式对多个标签生效，使用class选择器。
选择具有相同的class属性值的元素。
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
PS：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
选择具有相同标签名称的元素。
定义选择器语法：标签名称{}；PS：标签名称必须是html提供好的标签。
使用标签选择器：自动使用在所有的同名的标签上
ID选择器 > 类选择器 > 标签选择器
当多个选择器作用在同一个标签上的时候，如果属性冲突，看优先级；如果不冲突，样式叠加生效。
行内样式 > 内部样式 >外部样式
同样，三个样式表中都有内容作用在同一个html标签的时候，如果属性冲突，看优先级；如果不冲突，样式叠加生效。
跟颜色相关的取值分3种：
1、颜色的单词 red blue...
2、rgb(红，绿，蓝)三色的取值范围是0-255 rgb(255,0,0)
rgba（红，绿，蓝,透明度），透明度取值：0-1 0 全透明 1-不透明 0.5 半透明rgba(255,0,0,0.4)
3、#值1值2值3 ：值的范式是00-FF 十六进制数字组成的 例如：#FF0000
PS：只有块状元素可以设置宽高，行级元素设置不生效。
取值方式有2种：
1：数值 绝对数字 单位是像素PX
2：百分比：占据父元素的比例
以谷歌浏览器为例说明。
快捷键F12或者工具条中的开发者工具调出以下内容。
在elements中可以看到当前页面的所有标签，在styles中可以看到html元素对应的样式。
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
盒子模型说明图：
元素的实际宽度和高度：
当我们计算一个元素实际在页面占有的总宽度计算公式是这样的：
总元素宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
div{
width: 400px;
height: 200px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<!--没有浮动属性的元素都属于常规文档流：从上往下从左往右依次显示
浮动的元素都脱离了常规文档流；
为了好理解：大家可以认为浮动元素属于一层，非浮动元素属于一层
如果想要非浮动元素不受浮动元素的影响，需要使用clear属性
-->
<div style="background: rgba(255,0,0,0.5); float: left;">
div1-左浮动，脱离常规文档流，紧贴父元素或者上一个同方向浮动
</div>
<div style="background: lawngreen; width: 600px; height: 350px; ">
div2-未浮动，常规文档流,
<br/>PS:此时div1在div2的上方显示，因为div1和div2是不同文档流中的元素，显示互不影响
如果不想让div2被浮动元素影响，需要添加clear属性。
添加clear: left;之后div2就会忽略div1浮动的影响，在div1层后面显示，不会重叠了，大家可以自己试验一下
</div>
<div style="background: lightblue; float: right; width: 1800px;">
div3-右浮动，脱离常规文档流，紧贴父元素或者上一个同方向浮动
</div>
<div style="background: lightcoral; width: 600px; height: 350px; ">
div4-未浮动，常规文档流,
<br/>PS:此时div3在div4的上方显示，因为div3和div4是不同文档流中的元素，显示互不影响
如果不想让div4被浮动元素影响，需要添加clear属性。
添加clear: right;之后div4就会忽略div3浮动的影响，在div3层后面显示，不会重叠了，大家可以自己试验一下
clear属性有三个取值：left、right、both;分别是取出左浮动、有浮动和所有浮动元素的影响
</div>
<div style="background: lavender;">
div5-未浮动，常规文档流,
</div>
</body>
</html>
控制内容溢出元素框时显示的方式。
overflow属性有以下值：
值 | 描述 |
visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
hidden | 内容会被修剪，并且其余内容是不可见的。 |
scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
inherit | 规定应该从父元素继承 overflow 属性的值。 |
注意:overflow 属性只工作于指定高度的块元素上。
注意: 在 OS X Lion ( Mac 系统) 系统上，滚动条默认是隐藏的，使用的时候才会显示 (设置 "overflow:scroll" 也是一样的)。
display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。
隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
CSS样式有以下三个：
由两个或多个基础选择器，通过不同方式组合而成的。
可以更准确更精细的选择目标元素标签。
语法：* {} 一般去掉标签的一些默认效果的时候使用，或者整站通用效果时使用。但是不推荐，一般将 * 替换为常用标签的名称，并用逗号分隔，其实就是使用并集选择器。
并集选择器（CSS选择器分组）是各个选择器通过,连接而成的，通常用于集体声明。
语法：选择器1，选择器2，......选择器N{}
意思是多个选择器都是通用的样式。任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。
条件：交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。
语法：h3.class{ color:red; }
其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，例如div.list。
交集选择器是并且的意思。 即...又...的意思
例如： table.bg 选择的是： 类名为 .bg 的 表格标签，但用的相对来说比较少。概念：后代选择器又称为包含选择器。
作用：用来选择元素或元素组的子孙后代。
其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，在写儿子孙子。
格式：父级 子级{属性:属性值;属性:属性值;}语法：.class h3{color:red;font-size:16px;}
当标签发生嵌套时，内层标签就成为外层标签的后代。
子孙后代都可以这么选择。 或者说，它能选择任何包含在内 的标签。
作用：子元素选择器只能选择作为某元素子元素(亲儿子)的元素。
其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接。
语法：.class>h3{color:red;font-size:14px;}
比如： .demo > h3 {color: red;} 说明 h3 一定是demo 亲儿子。 demo 元素包含着h3。<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>复合选择器</title>
<style>
/*全局选择器：
一般去掉标签的一些默认效果的时候使用，或者整站通用效果时使用。但是不推荐，
*/
*{
color: #333;/*定义全局文字颜色，统一色彩基调*/
}
/*并集选择器：通常用于集体声明
替换全局选择器；
*/
div,p,dldt,dd{
/*去掉浏览器的默认样式*/
margin: 0;
padding: 0;
color: #333;/*定义全局文字颜色，统一色彩基调*/
}
/*交集选择器*/
li.myli{
color: red;
}
/*后代选择器*/
ul li{
font-size: 28px;
}
.myUL li{
font-family: "微软雅黑";
}
.myUL li a{
text-decoration: line-through;
}
/*子元素选择器*/
.demo>h3{
color: red;
}
</style>
</head>
<body>
<ul>
<li>li11111111111</li>
<li class="myli">li22222222222</li>
<li>li33333333333</li>
<li>li44444444444<a href="">点击我试试</a></li>
<li class="myUL">
<ul>
<li>li11111111111</li>
<li class="myli">li22222222222</li>
<li>li33333333333</li>
<li>li44444444444
<a href="">点击我试试</a>
</li>
</ul>
</li>
</ul>
<ol>
<li>li11111111111</li>
<li>li22222222222</li>
<li>li33333333333</li>
<li>li44444444444</li>
</ol>
<div class="demo">
div1
<h3>静夜思</h3>
<ul>
<li><h3>静夜思----li</h3></li>
</ul>
</div>
</body>
</html>
伪类选择器：和类选择器相区别类选择器是一个点 比如 .demo {} 而我们的伪类 用 2个点 就是 冒号 比如 :link{} 。
作用：用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。
因为伪类选择器很多，比如链接伪类，结构伪类等等。我们这里先给大家讲解链接伪类选择器。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
/*伪类选择器*/
a:link{
color: red;/*默认颜色是红色*/
}
a:visited{
color: blue;/*访问过的页面是蓝色*/
}
a:hover{
color: green;/*鼠标悬浮是绿色*/
font-size: 28px;
}
a:active{
color: gold;/*按下鼠标不放手是金色*/
font-family: "微软雅黑";
}
</style>
</head>
<body>
<a href="03-常用样式.html" target="_blank">常用样式</a>
<a href="04-盒子模型1.html" target="_blank">盒子模型</a>
<a href="05-综合练习.html" target="_blank">综合练习</a>
</body>
</html>
注意**
a { /* a是标签选择器 所有的链接 */
font-weight: 700;
font-size: 16px;
color: gray;
}
a:hover { /* :hover 是链接伪类选择器 鼠标经过 */
color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
}选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
后代选择器 | 用来选择元素后代 | 是选择所有的子孙后代 | 较多 | 符号是空格 p .one |
子代选择器 | 选择 最近一级元素 | 只选亲儿子 | 较少 | 符号是> .nav>p |
交集选择器 | 选择两个标签交集的部分 | 既是 又是 | 较少 | 没有符号 p.one |
并集选择器 | 选择某些相同样式的选择器 | 可以用于集体声明 | 较多 | 符号是逗号 .nav, .header |
链接伪类选择器 | 给链接更改状态 | 较多 | 重点记住 a{} 和 a:hover 实际开发的写法 |
*请认真填写需求信息，我们会在24小时内与您取得联系。
