一. CSS选择器？
1. ID选择器 #elem{} id="elem" 注： 1. ID是唯一值，⭐️在一个页面中只能出现一次，出现多次是不符合规范的。 2. 命名的规范，由字母、下划线、中划线、数字（⭐️并且第一个不能是数字） 3. 驼峰写法 : searchButton (小驼峰) SearchButton (大驼峰) searchSmallButton 短线写法：search-small-button 下划线写法：search_small_button
2. CLASS选择器 .elem{} class="elem" 注： 1. class选择器是可以复用的。 2. 可以添加多个class样式。<div class="box content sty1 sty2"></div> .box{}.content{}...都会生效 3. ⭐️多个样式的时候，样式的优先级根据⭐️CSS决定，而不是class属性中的顺序。 4. 标签+类的写法 eg.p.box div.box 3. 标签选择器(TAG选择器) div{} <div></div> 使用的场景： 1. 去掉某些标签的默认样式时 2. 复杂的选择器中，如 层次选择器
4. 群组选择器(分组选择器) 可以通过逗号的方式，给多个不同的选择器添加统一的CSS样式，来达到代码的复用。 eg. div,p,h2, .content, #text
5. 通配选择器
*{ } -> div,ul,li,p,h1,h2....{} 注：⭐️尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用。 使用的场景： 1. ⭐️去掉所有标签的默认样式时
6. 层次选择器
后代 M N { } ul li{ } 父子 M > N { } #list>li{ } 只能是父子 不能是孩子的孩子节点 兄弟 M ~ N { } 当前M下面的所有兄弟N标签 div ~ h2 找div下的所有h2 跟上面的没关系 相邻 M + N { } 当前M下面相邻的N标签 ⭐️只是相邻 不是所有div + h2 如果div下面是p也不能
7. 属性选择器
M[attr] {} div[class]{ }找div标签中所有带class属性的 = : 完全匹配 div[class=box]{ } *= : 部分匹配 div[class=search]{ } 只要class中出现search的就选上 ^= : 起始匹配 $= : 结束匹配 [][][] : 组合匹配div[class][id]{ }
8. 伪类选择器 ⭐️如果都写，那顺序是L V H A tips：谷歌浏览器清楚缓存：设置里清除浏览数据，选择时间清除，如果还不行那就选上高级里的选项 M:伪类{} :link 访问前的样式 ( 只能添加给a标签 ) :visited 访问后的样式 ( 只能添加给a标签 ) :hover 鼠标移入时的样式 (可以添加给所有的标签) :active 鼠标按下时的样式 (可以添加给所有的标签)
注： 一般的网站都只设置 a{} ( link visited active ) a:hover{}
9. :after、:before 通过伪类的方式给元素添加一段文本内容，使用content属性 ⭐有什么用？可以做浮动，精灵图标的操作 为什么浏览器中看到两个冒号：：？因为这是伪元素 :checked、:disabled 、:focus 都是针对表单元素的
10. 结构性伪类选择器 nth-of-type() nth-child() 角标是从1开始的，1表示第一项，2表示第二项 | n值 表示从0到无穷大 first-of-type last-of-type only-of-type 只有一个的时候才有效
nth-of-type()和nth-child()之间的区别 注意运行代码看区别 type : 类型 child : 孩子
二. CSS继承？ ⭐️ 文字相关的样式可以被继承 布局相关的样式不能被继承 ( 默认是不能继承的，但是可以设置继承属性 inherit 值 )
