我们每个人都意识到了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://开头
— 申请免费试学名额 —
在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!
相关推荐 更多
经典Web前端面试题分享
很多小伙伴在面试的时候会遇到各种各样的面试题。同样从一个学校出来的大学生,经常在面试的时候面临不同的结局,并不一定是部分同学掌握的知识不够丰富,更多的时候是因为在面试的时候无法系统的解答面试官的问题。所以多参考一下经典的web前端面试题,对未来的就业会有很大的帮助。
5895
2019-06-17 17:32:46
前端面试被问到项目中的难点有哪些?
在每个前端求职者的面试过程中,一定都有过被面试官问到项目中的难点,而答不上来的情况。为了让大家在前端面试前准备得更加充足,小编准备了一些易被忽视且难度较高的前端面试题,希望可以帮助大家更加顺利完成求职,找到自己满意的工作。
31360
2019-10-08 19:02:38
常见三大缓存问题分析及解决方案
一般来讲,常见三大缓存问题不外乎就是缓存穿透、缓存击穿、缓存雪崩。三者的共同点都是高并发,缓存更新、缓存失效居多。而且三者也会相互恶化,导致问题更加严重,因此一旦有一个问题就需要马上解决,以免最引起“雪崩”。本文将分别分析缓存并发、缓存雪崩、缓存击穿三大问题,并提出对应的解决方案。
4162
2019-11-01 18:23:18
前端面试中常见的浏览器相关问题
疫情好转后。迎来一波复工热潮。在这个时候,也是许多小伙伴求职面试的高峰期。因此小编为大家整理了前端面试中常见的浏览器相关问题,众所周知,浏览器的相关问题是前端面试中的基础问题,也是几乎必考的问题。希望大家可以在前端面试前,多刷刷题,准备得更加充分。
3001
2020-03-23 17:47:15
JavaScript常见面试题梳理
JavaScript作为前端开发三大要素之一,是前端面试中考察的一大重点。本文为大家对JavaScript常见面试题进行了梳理,大家可以做一做下面的面试题,进行查漏补缺!
2709
2020-07-06 14:41:17
热门文章
- 大数据的薪资怎么样?想学大数据了?
- 吐血整理的大数据学习资源大全
- 数据分析行业到底有多卷
- 传智教育在线课程助力职场升级,看IT人才如何破局职业瓶颈
- 传智教育博学谷赋能在职人群,推出系列公开课及大咖1对1聊技术
- 大数据开发的前景和就业如何?该如何去学习它?
- 成为架构师,读书之外什么更重要?
- 如何从Java工程师成长为架构师?
- 比较实用的大数据分析模型有哪些?
- Java原子操作之CAS原子指令学习 查看更多
扫描二维码,了解更多信息
