Foreword写在前面的话：
大家好，我是一名刚开始学习HTML的新手。这篇文章是我在学习html过程中的一些笔记和心得，希望能和同样在学习HTML的朋友们分享。由于我的知识有限，文章中可能存在错误或不准确的地方，欢迎大家在评论区提出建议和指正。我非常期待大家的反馈，以便我能不断学习和进步。同时，我也会在文章中注明参考的资料，以示对原作者的尊重。
PS：本帖以记录学习心得和课堂笔记为主，没有其他大博主那么专业，但是简单易懂^-^
本贴的其他相关学习笔记资料可以通过订阅专栏获取，喜欢的小伙伴可以多多点赞+关注呀！后续会 持续更新相关资源的~
课程学习资源：根据b站‘前端Web开发HTML5+CSS3+移动web视频教程，前端web入门首选黑马程序员’ 视频学习记录而成。原视频网址：前端Web开发HTML5+CSS3+移动web视频教程，前端web入门首选黑马程序员_哔哩哔哩_bilibili
第四十三课总览：css进一步学习：复合选择器，css特性，背景属性，显示模式
搜索热词+界面设计
复合选择器的学习：
定义：由两个或者多个基础选择器，不同方式组合而成
作用：更准确高效的选择目标元素标签。
应用场景：多个同类标签差异化设置不同效果。
1. 后代选择器：选中某元素的所有后代元素。
选择器写法：夫选择器 子选择器{}
（父子选择器之间用空格隔开。）
后代选择器会选中父亲以下所有指定的子代标签：
即会选中所有后代。即父亲以下所有的span子代都会由这种效果。
2. 子代选择器
定义：选中某元素的子代元素（最近的子级）
写法：父选择器>子选择器{}
（父子选择器之间用大于号＞隔开，有大于号就是子代选择器）
子代选择器之对离父亲最近的子代有效果 就好像宠爱自己最近的儿子一样。
3. 并集选择器
定义：选中多组标签设置相同的样式。
应用场景：几个标签外观相同的时候。
写法：选择器1，选择器2，选择器3{}
（即不同选择器之间用逗号隔开即可）
写代码的时候建议敲完逗号就换行写下一个选择器，更加清晰。
4. 交集选择器（了解即可）
定义：选中同时满足多个条件的元素。
写法：选择器1选择器2{}
（选择器之间连着写，无符号在中间）
注意：如果有标签选择器，标签选择器要放在最前面。（因为类选择器前面有个点，放最前面太奇怪了）
复合选择器四种类型：父代子代并集交集选择器
伪类选择器
伪类表示元素状态，选中元素的某个状态设置样式。
（注意：鼠标划过就是一种状态）
鼠标悬停状态： 选择器：hover{}
（就是想要展示这种状态的选择器名字+冒号+hover{}
基础选择器包括标签选择器和类选择器，hover冒号前面只可以放基础选择器。
只有在鼠标放上去的时候才会有对应的改变颜色效果。
注意：任何标签都可以设定伪类鼠标悬停的效果。
伪类-超链接（拓展）
超链接一共有四种状态
选择器： 作用
：link 访问前
：visited 访问后
：hover 鼠标悬停
：active 点击时（激活）
如果要给一个超链接设置四个状态，需要按照lvha的顺序写。
为什么写完代码刷新后的颜色是已访问的蓝色？因为浏览器有记忆，直到你之前点过了
一般工作当中不会一口气设置lvha四个样式，一般对于a标签选择器单独设置一套样式，然后对a:hover{}也设置一下
工作中一般就是一个a标签设置所有a的属性，然后再a：hover{}提示用户鼠标位置。
第四十七课：css特性（属性或者选择器的特点）
css特性：化简代码，定位问题，并解决问题
css 3 特性：继承性，层叠性，优先级
继承性：
子级默认继承父级的文字控制属性
常用文字控制属性一览表：
这些都可以实现儿子继承父亲。
通过在style里面直接对body使用标签选择器，其效果也会直接作用到body的儿子们上。
注意：如果标签自己有样式，就遵守自己的样式，不继承父级的样式
---理解：和python中的子类父类定义相似，如果父类子类方法名字一样，子类会执行子类重名方法里面对应的代码。总要推陈出新而非循规蹈矩嘛
比如：在body标签里面放一个a标签，a标签默认的文字颜色的是蓝色：
所以发现aaaaa并没有变成红色，但是对于a的其他属性，由于a自己现在并没有，所以就会继承父类的对应属性。----理解：没有的话就继承，有的话就用自己的。
由于h1标签自带字体大小属性，所以body的字体大小属性没能继承到h1上
层叠性：
特点：
相同的属性会覆盖：后面的css属性覆盖前面的css属性---活在当下而非过去
不同的属性会叠加：不同的css属性都生效
覆盖的特性：
叠加：
发现两个div标签选择器的不同的效果都实现了，但是想通过的效果只实现了当下的。
选择器的优先级：（类型不一样哪个选择器生效）
优先级：权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配机制。
规则：谁的优先级高，谁的样式生效。
公式：通配符选择器＜标签选择器＜类选择器＜id选择器＜行内样式＜！important
公式不用记忆。
理解：通配符选择器是通用的普适效果实现，范围最大，所以优先级最低；类选择器是写在标签里面的，所以可以理解为是标签的定制效果分类，既然是定制，那类选择器的优先级就比标签选择器高；id选择器，理解：一个账号的身份证就是id/uid，所以他是总所周知的定制效果，所以比类选择器优先级高；然后，行内样式就是标签里面的style，也就是一个人的内在气质和魅力，是比身份证更高深更高级的，所以比id选择器优先级高；最后！important就是标注某属性直接把其优先级拉满。
记忆口诀：选中的标签范围越大，优先级越低。（提供个人定制化的服务时大势所趋啊）
优先级样式的实现和代码在上在下无关。（与层叠性的结合理解：注重当下固然重要，但是你优先还是你优先）
id选择器在style标签里面指定就是#name{}
标签里面就是 id=“name”
行内样式：直接在标签里面打空格接style=“” 里面接属性以及属性值。
！important 将某属性的优先级强制加到最高。（提权功能，提高权重到最高。）慎用
直接加到属性值后面，冒号前面。
优先级-叠加计算规则：
叠加计算：如果是复合选择器，则需要权重叠加计算。
公式：（每一级之间不存在进位）
（行内样式，id选择器个数，类选择器个数，标签选择器个数）
就是数个数，从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同则向后比较。
！important权重最高
继承权重最低（因为我没有才会继承这个属性嘛）
权重叠加计算第一题练习代码：
思路：1. 先排除特殊情况：！important以及继承；
就是最终能够选中文字所在标签的{} 就不是继承。继承就是只说明父亲）
2. 从左到右依次比较选个数：行内样式，id选择器个数，类选择器个数，标签选择器个数）
分别列出所有的值，一目了然。
所以结果是orange
第二题：
.father{} 没有直接指定到文字所在的标签，所以是继承，优先级最低。所以是红色。
第三题：
这里的father id没有直接指定到文字所在的标签，所以是继承；虽然里面有提权！important，仍然是可以不用管的---至强与至弱互相纠缠的结果只能是渔翁得利。
所以是蓝色。
最后，感谢每一位阅读这篇文章的朋友，你们的反馈对我来说非常宝贵。如果有任何问题或建议，请随时告诉我。让我们一起学习和进步吧！如果您喜欢我的内容，别忘了点赞和关注哦，我会定期分享更多有价值的信息。
标签：Web,优先级,样式,标签,选择器,css,属性 From： https://blog.csdn.net/2302_80218188/article/details/142886777