在线客服
扫描二维码
下载博学谷APP
扫描二维码
关注博学谷微信公众号
我们每个人都意识到了CSS的重要性，但是还有很多人不知道css有哪些基本选择器和高级选择器？下面我们来总结一下。
ID选择器>类选择器>标签选择器
行内样式>内部样式>外部样式
*结构伪类选择器 一旦设置 不管在行内还是在后面重新设置，都没办法改变
*结构伪类选择器设置奇偶行以及从第三行开始变色如何实现
nth-cild(2N+3)表示从第三行开始的奇数行
同理 nth-child(2N+4)表示从第四行开始的偶数行
nth-cild(2N+5)表示从第五行开始的奇数行
*设置前三个：
p:nth-child(-n+3){
background-color: #b3d4fc;
}
*使用E F:nth-child(n)和E F:nth-of-type(n)的 关键点
E F:nth-child(n)在父级里从一个元素开始查找，不分类型
E F:nth-of-type(n)在父级里先看类型，再看位置
注意
child 跟子选择器没有关系，可以是子选择，也可以是后代选择 由层次选择器 (如table tr）来控制
1.层次选择器
table td 后代选择器 td包含在table里
div>p子选择器 p是div的子元素
p1+p p1后面一个兄弟p变化 是对p进行处理 p1不变 而且只是下面相邻的变化 上面相邻不变化
p1~p p1后面所有兄弟p变化 p1不变
2.结构伪类选择器
P:first-child 作为父元素的第一个子元素得元素 p
P:last-child 作为父元素的最后一个子元素得元素 p
P a :nth-child(n) p中第n个a元素 （even）（odd）
p:first-of-type 必须是p元素 不是子元素也行
p a:nth-of-type(n)
必须是a元素 不是a的子元素也行
3.属性选择器
a[id] a标签中含有id的
a[id=111] a标签中的id=111的
a[href*=http] a标签中包含href属性 且都包含http
a[href&=png] a标签中包含href属性 且最后以png结尾
a[href^=http://] a标签中包含href属性且以http://开头
— 申请免费试学名额 —
在职想转行提升，担心学不会？根据个人情况规划学习路线，闯关式自适应学习模式保证学习效果
讲师一对一辅导，在线答疑解惑，指导就业！
上一篇：
渐进增强与优雅降级之间的不同
下一篇：
如何理解HTML结构的语义化？
相关推荐 更多
30道常见Web前端面试题你会几个？
30道常见Web前端面试题你会几个？以下30到web前端面试答出了大多数的或者是全部的题表明你的基础扎实；只答出小部分或者答出了大部分题但答案不正确，说明水平还差的远，基础知识不扎实距离拿高薪还很遥远，需要基础夯实基础。
6461
2019-09-27 15:11:17
前端工程师求职面试题含答案
一名合格的前端工程师需要熟练掌握Web前端技术，像是比较基础的HTML5+CSS3必须要会，JavaScrip也需要很好等等。本文整理了前端工程师在求职过程中会遇到各类面试题，分别是HTML、CSS、JavaScript、ES6、计算机网络和浏览器等等相关的知识点。这些面试题也附上了答案，大家要是做不出来可以参考一下。
5625
2019-10-28 19:41:42
常见三大缓存问题分析及解决方案
一般来讲，常见三大缓存问题不外乎就是缓存穿透、缓存击穿、缓存雪崩。三者的共同点都是高并发，缓存更新、缓存失效居多。而且三者也会相互恶化，导致问题更加严重，因此一旦有一个问题就需要马上解决，以免最引起“雪崩”。本文将分别分析缓存并发、缓存雪崩、缓存击穿三大问题，并提出对应的解决方案。
8150
2019-11-01 18:23:18
前端模块化相关面试题整理
随着Web2.0时代的到来，使用模块化规范进行管理成为许多人开始考虑的想法。本文为大家整理总结了前端模块化的相关面试题，大家可以借此机会把模块化的相关知识点梳理一遍。了解异步模块加载机制、使用模块化的原模块化的优缺点等等内容。希望本文可以让大家彻底掌握前端模块化的相关面试题！
8383
2020-01-13 09:26:48
Web前端HTML面试题及答案
Web前端HTML面试题及答案，HTML称为超文本标记语言，是一种标识性的语言。在前端开发中离不开HTML，支持不同数据格式的文件镶入，前端工程师在面试过程中涉及到一些基础知识，常见的前端HTML面试题有哪些呢？
6379
2020-05-22 16:19:06
