点击上方前端Q关注公众号
回复入群，加入前端Q技术交流群
一、忘了最基础的东西
前端开发的核心建立在三种基础技术之上：HTML、CSS 和JavaScript。多年前，前端开发人员（有时被戏称为“切割者”）能够利用其卓越的CSS 技能来创建各种复杂的交互、特效，并施展前所未有的Web 魔法，这是我可以胜任的角色。
对于专注于服务器端开发的工程师来说，这是一个困难的领域。
因此，前端工程师这个职业逐渐出现，早期的培训课程中也包含教授这些技能的专门课程。
然而，随着时间的推移，UI 组件库和框架变得越来越流行，尽管人们仍然认识到HTML 和JavaScript 的重要性，但CSS 技能却变得越来越边缘化，甚至被忽视。
在浏览代码的过程中，我发现一位有3-4年前端开发经验的同事连CSS中最基本的类型选择器都不能熟练。这种现象令人震惊。
二、令人无语的代码
管理useState 的使用场景。我发现了一个我无法用语言表达的代码。我将代码简化为：
从\’react\’ 导入React, { useState };
从\’antd\’导入{输入}；
从“react”导入类型{ FC }。
从“./index.less”导入样式。
常量Test: FC=()={
const [isFocus, setIsFocus]=useState(false);
返回（
输入
className={isFocus style[\’input-focus\’] : style.input}
焦点={()={
setIsFocus(true);
}}
onBlur={()={
setIsFocus(假);
}}
/
）；
};
导出默认测试。
.输入焦点{
背景：#f2f3f；
}
三、询问缘由
这段代码的目的是根据输入框的焦点状态（聚焦与否）来改变输入框的样式，逻辑上没有任何问题。
我找到了写这段代码的同事，问他：“为什么我需要定义一个isFocus 状态？”
他看了代码半天，有点困惑地解释道，“这是为了跟踪输入框的焦点状态，并在焦点时改变背景颜色。”
“这个条件还有什么用处吗？”
“没有了，就是这样，你还有什么问题吗？”
我接着问，“不使用isFocus 状态我能达到同样的效果吗？”
他想了一会儿。 “如果不添加类名来标识输入框的焦点状态，如何区分它呢？”
我想出了一个替代方案：“我们可以只用CSS 来做到这一点吗？”
他犹豫了一下，“但是CSS怎么判断输入框是否有焦点呢？”
我提醒他，“你尝试过使用伪类选择器吗？”
“伪类？我通常只使用类选择器，”他回答道。
我解释道：“你可以使用：focus伪类来实现这个效果。你可以回到开头继续工作。”
四、审查他另外的代码
然后我又继续查看这位同事的其他代码，发现他对CSS的理解似乎不是很深。例如，要实现列表的斑马纹效果，需要直接使用：nth-child(odd) 和：nth-child(even) 选择器，但可以确定索引是奇数还是偶数并添加选择。在设备遍历的过程中就达到了这个效果。
此外，您同时使用float: left 和position:Absolute，这在布局中是矛盾的组合。
我还使用JavaScript 动态添加类选择器并更改输入框中提示文本的字体颜色。我还反复定义颜色和字体大小，但不明白这些可以继承。
我不知道这是否是他态度或能力的体现，但在他现在的环境下，只是出去消化一下，我默默记录下来，以供以后评价参考。
五、关键是理解而不是记忆
有些人可能认为我的要求太严格了。也许这位同事只是忘记了这些CSS 选择器。事实上，CSS 选择器的类型非常多，超过60 种，以至于很难记住每一种。
不过，关键不是记住每个选择器，而是了解它们的功能和使用场景。
这样，当面对特定的样式需求时，您可以轻松找到并应用最合适的选择器以达到所需的效果。
最基本的元素选择器、类选择器和ID 选择器因其简单和直观而被频繁使用。然而，仔细研究不太明显的选择器也很重要，例如通配符选择器、组合选择器、属性选择器、伪类选择器和伪元素选择器。
这些选择器为您提供更多控制，并允许您创建更复杂和详细的视觉效果。
总之，您不必强迫自己记住所有CSS 选择器。更重要的是要了解CSS 选择器的多功能性和功能。
这种理解将帮助您知道在遇到某些样式问题时如何找到解决方案，并使您能够更有效地使用CSS 来优化代码。
要真正理解这些选择器，您需要考虑它们的设计原因以及它们如何帮助您更好地控制您的风格并解决不同的布局和视觉挑战。这种深刻的理解比单纯的记忆更重要、更有效。
六、为啥需要伪类选择器
CSS中伪类选择器的存在有着重要的意义和作用。它们提供了一种选择HTML 文档中无法使用简单选择器（例如元素选择器、类选择器或ID 选择器）直接选择的元素的方法。伪类选择器的最初设计意图和主要用途包括：
1、表达元素的特定状态
伪类选择器允许开发人员根据用户与页面的交互来更改元素的样式，而无需更改HTML 代码。
例如，hover 伪类可用于更改鼠标悬停在链接或按钮上时的样式。当元素接收焦点时（例如单击输入框时），将使用：focus 伪类。active 伪类在元素被激活（通常是单击）时使用。
它们基于用户行为的动态变化，直接通过CSS 实现，而不经过JavaScript，以提高网页交互性和用户体验。
2、选择特定位置的元素
您还可以使用伪类选择器来选择特定位置的元素，例如第一个子元素、最后一个子元素或父元素的唯一子元素。
这在设计复杂的布局和样式时非常有用，尤其是在使用列表、表格和导航菜单时。
例如，伪类选择器（如：first-child、last-child 和：nth-child()）提供了一种灵活的方法来选择特定位置的元素并设置其样式。
3、选择特定属性的元素
虽然可以使用属性选择器（例如[attribute=value]）根据元素的属性来选择元素，但某些伪类选择器（例如：checked）提供了一种选择具有特定属性的元素的简单方法。
例如，checked 伪类选择器可以选择所有选中的复选框和单选按钮。这对于自定义表单控件的样式很有用。
4、增强可访问性
伪类选择器还可以增强网页的可访问性。例如，您可以使用：focus 伪类为焦点元素定义显式样式。这对于键盘导航用户来说很重要。
提供视觉反馈可以让用户更轻松地识别他们当前正在交互的元素，从而提高网站的可访问性。
5、无需额外的HTML标记
伪类选择器允许开发人员实现复杂的样式和布局，而无需添加HTML 标记。
这使您可以减小页面大小并提高加载速度，同时保持HTML 代码简洁和语义。
简而言之，伪类选择器为CSS 提供了强大的功能，使开发人员能够对其网页样式进行更精细和动态的控制。
这些是现代网页设计的重要工具，允许网页响应用户交互，同时保持代码整洁和高效。
七、为啥需要伪元素选择器
CSS中伪元素选择器的引入为网页设计和内容呈现提供了更丰富、更灵活的手段。
伪元素选择器允许开发人员访问元素的特定部分并设置其样式，或者在文档树中虚拟地创建新元素，而这是他们通常无法在HTML 中直接执行的操作。
伪元素选择器的存在有几个重要的原因和用途。
1、访问和样式化文档的特定部分
伪元素选择器允许开发人员访问元素的特定部分并设置其样式，例如文本的第一行、第一个字符或元素前后的内容。例如，first-line 和：first-letter 伪元素允许开发人员分别为文本的第一行和元素的第一个字母设置特定的样式。
这在创建吸引人的布局和阅读体验时非常有用。
2、在不改变HTML结构的情况下添加内容
:before 和：after 伪元素允许开发人员在元素内容之前或之后插入新内容或装饰，而无需更改HTML 代码。
此方法非常适合添加图标、装饰元素或向元素添加特殊前缀或后缀，同时保持HTML 清晰和语义。
3、创建视觉效果
伪元素选择器通常用于创建特殊的视觉效果，例如自定义清除浮动方法（使用：after 清除浮动）或设计复杂的背景装饰和形状。
这些可以通过CSS 伪元素和其他功能（例如背景、边框和框阴影）来实现。
4、提高网页性能
伪元素允许您实现复杂的设计，而无需添加额外的HTML 元素，从而减少DOM 的大小并提高网页的性能。通过减少页面加载时需要解析的HTML 标记数量，可以更快地呈现页面。
5、保持HTML的语义化
通过使用伪元素添加装饰性内容和样式，开发人员可以避免向HTML 添加非语义标记。
这可以使您的HTML 文档保持清晰和语义化，使它们的结构更加清晰，并且更容易被搜索引擎优化(SEO) 和屏幕阅读器理解。
简而言之，伪元素选择器为CSS 提供了强大的功能，使开发人员能够更精细、更动态地控制网页的样式和内容。
它们是现代网页设计的重要工具，允许开发人员在不牺牲HTML 语义的情况下实现复杂和创新的设计。
八、为啥需要属性选择器
CSS 中属性选择器的引入提供了一种通过根据属性及其值选择元素来应用特定样式的强大方法。这个选择器的存在和使用有几个重要的原因和好处。
1、精确选择和样式化元素
在复杂的网页设计中，开发人员可能需要将样式应用于具有特定属性或属性值的元素，而不是仅仅基于元素的类型、类或ID。属性选择器可以实现这种精确的选择。
例如，您可以选择所有设置了target=\’_blank\’ 属性的标签，对它们应用某种样式，并通知用户这些链接将在新窗口中打开。
2、提高CSS规则的灵活性
属性选择器增加了CSS规则的灵活性，允许开发人员根据元素属性和属性值创建复杂的选择条件。
这意味着开发者可以在不改变HTML结构的情况下，通过CSS实现更多的设计需求和响应式布局。
3、增强样式的可维护性
属性选择器允许开发人员避免在HTML 中过度使用类和ID，从而简化HTML 结构并提高样式的可维护性。
如果需要对基于相同属性的元素应用统一的样式，只需要在CSS中定义一次相应的属性选择器规则，而不需要在HTML中为每个元素重复添加类和ID。
4、促进更好的语义化和可访问性
属性选择器允许您增强文档的语义和可访问性。例如，开发人员可以选择具有特定角色属性的元素并向其应用样式，以使屏幕阅读器等辅助技术更容易访问网页。
5、实现条件样式
在某些情况下，开发人员可能希望仅在元素具有特定属性或属性值时应用样式。属性选择器允许您实现这种条件样式，而无需添加类、ID 或使用JavaScript。
这种方式非常适合基于特定数据属性（data-*属性）实现样式改变。
例子
假设您要向包含特定属性data-tooltip 的所有元素添加工具提示样式。您可以使用以下CSS 规则：
[数据工具提示]{
相对位置：
光标：指针；
}
[数据工具提示] : 年前{
content:attr（数据工具提示）；
/*定义工具提示外观的附加样式规则*/
}
此示例演示如何仅使用CSS 和HTML 属性来实现简单的工具提示功能，而不更改HTML 结构或使用JavaScript。
简而言之，属性选择器赋予CSS更多的选择和样式功能，使样式表更加灵活和可维护，同时促进文档结构和语义的改进。
九、为啥需要组合选择器
选择器组合在CSS 中发挥着重要作用，它提供了强大的机制来选择具有特定关系的元素，并允许开发人员以更详细和具体的方式应用样式。连接选择器的存在和使用主要基于以下原因：
1. 提高选择器的精确性
在复杂的网页布局中，仅使用简单的选择器（如元素选择器、类选择器、ID选择器）往往很难准确定位特定元素。
结合选择器，开发者可以通过定义元素之间的关系（父子、邻接等）来更精准地选择目标元素。这种精度对于实现特定的布局和风格效果非常重要。
2. 优化CSS的结构
当与选择器结合使用时，您可以避免在HTML 中过度使用类和ID 来实现样式化目的，并且CSS 的结构会变得更加清晰和简洁。
这种方法有助于提高代码的可维护性和可读性，同时减少由于重复定义样式而导致的冗余。
3. 实现更复杂的样式设计
组合选择器提供了一种根据特定元素关系实现复杂样式的方法。例如，开发人员可以使用子选择器() 仅将样式应用于特定父元素的直接子元素，或使用相邻同级选择器(+) 将样式仅应用于特定父元素的直接子元素您还可以将样式应用于直接兄弟。
这种灵活性使开发人员能够创建更加动态和分层的页面布局和视觉效果。
4. 提升样式的可复用性
通过使用组合选择器，开发人员可以定义特定元素而不是特定类或ID 的关系样式。
这种方法提高了样式的可重用性。这是因为相同的组合选择器样式可以在不同的HTML 结构中重用，只要这些结构遵循选择器定义的元素关系即可。
5. 保持HTML的语义化
组合选择器允许开发人员根据元素之间的自然关系应用样式，而不是强迫他们添加额外的类或ID，从而帮助保留HTML 代码的语义。
这不仅阐明了HTML 结构，还有助于搜索引擎优化(SEO) 并提高网站的可访问性。
例子
假设我想向列表中的第一项添加一些特殊的样式。这可以使用子选择器和伪类选择器的组合来实现。
ulli: 第一个孩子{
颜色： 红色；
}
此示例演示如何使用组合选择器来精确选择特定元素并设置其样式，而无需向它们添加其他类或ID。
简而言之，组合选择器是CSS 不可或缺的一部分，通过定义元素之间的关系来增强选择器的功能，使开发人员能够以更灵活、更高效的方式设计和实现网页样式。
我过去推荐过的
甚至不要考虑调试你的前端代码。
来自大厂38岁程序员的建议！
更好的前端组件结构：组件树
终于
欢迎加我微信，加入我们的技术群长期交流学习.
一定要关注“前端Q”，认真学习前端，以成为专业工程师为目标……
请点击观看并支持我们。
#对于上面的内容，不要忘记前端是从什么开始的。相关内容来源网络仅供参考。相关信息请参见官方公告。
原创文章，作者：CSDN，如若转载，请注明出处：https://www.sudun.com/ask/92372.html
