p{
color:#900;
font-size:12px;
background:#090;
}
- ID选择器(#号+ID名):ID 选择器可以为标有特定 ID 的 HTML 元素指定特定的样式。 根据元素ID来选择元素,具有唯一性,这意味着同一id在同一文档页面中只能出现一次;
如:
#demoDiv{
color:#FF0000;
}
- 类选择器(.+class名):类选择器根据类名来选择,前面以”.”来标志;
如:
.demoDiv{
color:blue;
}
- 通用选择器(选择全部元素):通用选择器用*来表示;
如:
- {
color:green;
font-size: 12px;
}
- 群组选择器:当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔;
如:
p,h1,span{
color:red;
line-height:20px;
}
#main p, #sider span {
color:#000;
line-height:26px;
}
使用群组选择器,将会大大的简化CSS代码,将具有多个相同属性的元素,合并群组进行选择,定义同样的CSS属性,这大大的提高了编码效率,同时也减少了CSS文件的体积。
层次选择器
- 子选择器 (元素之间用>分割):子选择器(child selector)是指它的直接后代,可以理解为作用于子元素的第一个后代;
如:
p>span{
color:red;
}
- 后代选择器(元素之间用空格分隔):用来选择特定元素或元素组的后代,将对父元素的选择放在前面,对子元素的选择放在后面,中间加一个空格分开
如:
section span{
color:blue;
}
子选择器与后代选择器的区别:
1)子选择器(child selector)仅是指它的直接后代,而后代选择器是作用于所有子后代元素;
2)子选择器是通过“>”进行选择,而后代选择器通过空格来进行选择;
- 兄弟选择器(元素之间用+分隔):除了上面的子选择器与后代选择器,我们可能还希望找到兄弟两个当中的一个,如一个标题h1元素后面紧跟了两个段落p元素,我们想定位第一个段落p元素,对它应用样式。我们就可以使用相邻同胞选择器;
如:
h1 + p {
color:blue;
}
伪类选择器
伪类可以应用在链接标签中,也可以应用在一些表单元素中,但表单元素的应用IE不支持,所以一般伪类都只会被应用在链接的样式上。
-
动态伪类选择器
动态伪选择器的书写顺序:
1)link和visited必须放在最前面(无先后顺序,静态伪类选择器);
2)link和visited只能用于a标签;
3)link和visited后面是focus
4)focus后面是hover;
5)hover后面是active; -
结构伪类选择器
first-child:第一个元素。
last-child:最后一个元素。
nth-child(n):某一个元素 想选择第几个,n就取值多少。
nth-child(-n+m):选中前m个元素 n起始值是0。
nth-of-type(n):选中第n个元素。
nth-last-child(n):选中倒数第n个元素. -
否定伪类选择器
元素名:not(n)除了某个元素,其它元素添加样式
伪元素选择器:
所有伪元素选择器都必须放在出现该伪元素的选择器的最后面,也就是说伪元素选择器不能跟任何派生选择器;
- :first-letter,设置块元素首字母样式,行内元素转换成块元素和行内块元素也支持;
div p:first-letter {
font-size: 20px
}
//选择div元素里所有的p元素的第一个字母或汉字;
- :first-line:设置第一个文本行样式;
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且后续会持续更新
如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
其实前端开发的知识点就那么多,面试问来问去还是那么点东西。所以面试没有其他的诀窍,只看你对这些知识点准备的充分程度。so,出去面试时先看看自己复习到了哪个阶段就好。
这里再分享一个复习的路线:(以下体系的复习资料是我从各路大佬收集整理好的)
《前端开发四大模块核心知识笔记》
最后,说个题外话,我在一线互联网企业工作十余年里,指导过不少同行后辈。帮助很多人得到了学习和成长。
我意识到有很多经验和知识值得分享给大家,也可以通过我们的能力和经验解答大家在IT学习中的很多困惑,所以在工作繁忙的情况下还是坚持各种整理和分享。
db5a9d4251.png)
最后,说个题外话,我在一线互联网企业工作十余年里,指导过不少同行后辈。帮助很多人得到了学习和成长。
我意识到有很多经验和知识值得分享给大家,也可以通过我们的能力和经验解答大家在IT学习中的很多困惑,所以在工作繁忙的情况下还是坚持各种整理和分享。