在线客服
扫描二维码
下载博学谷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://开头
— 申请免费试学名额 —
在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!
相关推荐 更多
渐进增强与优雅降级之间的不同
在前端开发中,由于浏览器版本不统一,经常遇到低版本浏览器与高版本浏览器的样式无法同步实现的现象。因此渐进增强和优雅降级的概念就应运而生。那到底什么是渐进增强和优雅降级呢?他们之间有什么不同?
7145
2019-07-05 17:35:45
前端关于ES6的面试题汇总含答案
ES6全称是ECMAScript6,它可以帮助JavaScript语言成为企业级开发语言,编写大型且复杂的应用程序。在前端面试中,ES6也是一个经常出现的考点。本文整理汇总了ES6相关的面试题以及对应的参考答案,大家可以在面试前梳理一遍相关知识点,用最好的状态去迎接面试。
10535
2019-11-03 18:04:48
前端模块化相关面试题整理
随着Web2.0时代的到来,使用模块化规范进行管理成为许多人开始考虑的想法。本文为大家整理总结了前端模块化的相关面试题,大家可以借此机会把模块化的相关知识点梳理一遍。了解异步模块加载机制、使用模块化的原模块化的优缺点等等内容。希望本文可以让大家彻底掌握前端模块化的相关面试题!
7576
2020-01-13 09:26:48
前端面试Ajxa常见问题整理
Ajxa是每一个前端开发工作者做必须熟练掌握的必备技能,它是一种用于生成交互式Web应用程序的客户端Web开发技术。本文整理了一些前端面试的Ajxa常见问题,有面试机会的小伙伴可以做一做。当然,就算你目前还没有面试打算,也可以通过做题把前端相应的知识点复习一遍~
4919
2020-05-05 18:51:20
2020年Web前端JavaScript面试题整理附答案
很快又要到一年一度的秋招热季,大家都准备好面试了吗?本文为大家整理了2020年最新出炉的Web前端JavaScript面试题,大家可以好好做一做,有什么不懂得地方再看答案,下面一起来查漏补缺吧!
5811
2020-07-31 10:17:38