在线客服
扫描二维码
下载博学谷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结构的语义化？
相关推荐 更多
7个优秀的开放式前端面试题
本文为大家整理了7个比较优秀的开放式前端面试题与大家分享。所谓开放式，是没有完全固定的答案，最重要的是答题的思路是否对你未来的面试有所帮助。下面就跟着小编一起学习这7个开放式的前端面试题吧。
14290
2019-08-06 10:20:47
Web前端程序员必备 前端面试题汇总（1）
任何技术岗位面试的时候都要经过人力面试和技术岗位面试至少两次。人力面试一般也就是考察一下个人品质以及薪资问题，而技术岗位则是考察你是否有真才实学。本文和大家分享一个难到了很多前端工程师的面试题：Quirks模式是什么？它和 Standards 模式有什么区别？
6881
2019-06-27 18:15:42
渐进增强与优雅降级之间的不同
在前端开发中，由于浏览器版本不统一，经常遇到低版本浏览器与高版本浏览器的样式无法同步实现的现象。因此渐进增强和优雅降级的概念就应运而生。那到底什么是渐进增强和优雅降级呢？他们之间有什么不同？
7495
2019-07-05 17:35:45
前端有关node.js的面试题含答案
node.js是一个平台，它是基于Chrome JavaScript运行时建立的。同时，node.js也常常被看做是运行在服务端的 JavaScript。对于前端程序员来说，即使不懂得动态编程语言，想要创建自己的服务，只要选择Node.js就好了。因此在前端面试中，有关node.js的面试题是需要重点复习的内容。下面是小编整理的有关node.js的面试题和答案，一起来看看吧！
10393
2019-10-31 10:42:10
前端面试中常见的浏览器相关问题
疫情好转后。迎来一波复工热潮。在这个时候，也是许多小伙伴求职面试的高峰期。因此小编为大家整理了前端面试中常见的浏览器相关问题，众所周知，浏览器的相关问题是前端面试中的基础问题，也是几乎必考的问题。希望大家可以在前端面试前，多刷刷题，准备得更加充分。
5633
2020-03-23 17:47:15
