Hello World
③原因分析
在以上两段代码中,文件2比文件1新增了一个style标签,而标签内的东西才是关键所在
因为hello world是在p标签内所以将p标签选了出来经过一系列的修改得到了如图的效果。
具体是如何做的目前不必深究,需要知道的是css可以这么做,日后还会进行更多的样式介绍
希望大家给个关注阅读其他文章。
==============================================================================
上述介绍的案例就是使用的标签选择器,标签选择器就是
直接使用标签将相应的所有标签做出改变
①案例
Hello world
②结果
在此引入一个概念,给标签赋予类
例如：
这样可以选出这一类标签
①.案例
hello World
②.结果
使用方法与类选择器类似,可以对标签赋予id
一般来说：
因为id具有唯一性。经博主测试：
同一个html页面多个标签可以同时使用同一个id
①.案例
Hello World
②.结果
通配符选择器一般用于项目的初始化,可以直接选出所有标签,或具有某一特征的标签
①.案例
hello world
- hahha
②.结果
根据属性，选择出符合条件的标签。
基本语法：
选择出有类属性的标签
span[class=“re”] {
color: blue;
}
/* 该标签属性是1+10=11 */
选择出开头是demo的标签
div[class^=“demo”] {
color: chartreuse;
}
选择出结尾是data的id
select[id$=“data”] {
color: cyan;
}
选择出类名包含demo0的标签
div[class*=“demo0”] {
color: darkorchid;
}
①.案例
Document Hello World
Hello World
Hello WorldHello WorldHello WorldHello WorldHello World
Hello World
Hello World
Hello WorldHello WorldHello World②.结果
伪类选择器有两种
一种是孩子伪类选择器：以孩子为主体
一种是类型选择器：以类型为主体
/*
ul 标签下的div标签的第一个与最后一个孩子
*/
ul div:last-child {
color: aquamarine;
}
ul div:first-child {
color: blueviolet;
}
/*
odd是奇数
even是偶数
括号内支持数学公式
*/
div div:nth-child(odd) {
background-color: grey;
}
div div:nth-of-type(even) {
background-color: #ccc;
}
/*
以下两个标签是这两种标签最本质的区别
child以孩子个数为主,先检查孩子所属的位置,然后对比标签类型只有都符合才会触发效果
type以标签类型为主,在指定的标签类型中找到标签的次序,然后触发效果
*/
ul div:nth-child(1) {
background-color: hotpink;
}
ol div:nth-of-type(1) {
background-color: brown;
}
①.案例
Document Hello
HelloHelloHelloHelloHelloHello
HelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHello②.结果
伪元素选择器之所以叫伪元素选择器,就是因为标签不是真实存在的
而是依赖原有的盒子存在的,而原有的盒子身份是他的父盒子
伪元素有before after两种
div {
position: relative;
width: 300px;
height: 300px;
background-color: blueviolet;
}
/* 伪元素选择器必须要有content这一属性,如果啥也不存就用双引号引起来空格 */
div:hover::after {
content: ‘Hello’;
position: absolute;
width: 300px;
height: 300px;
background-color: rgba(0, 0, 0, 0.5);
text-align: center;
line-height: 300px;
font-size: 30px;
font-weight: 700;
}
①.案例
Document - Hello World
- Hello Sky
- Hello Boy
- Hello man
Hello Tim
结果：
②子代选择器
与后代选择器不同的是,并没有将所有的子标签全选上,而是选择的某特定的标签
代码：
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
最后
前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里获取！
–>
- Hello man
Hello Tim
结果：
②子代选择器
与后代选择器不同的是,并没有将所有的子标签全选上,而是选择的某特定的标签
代码：
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
[外链图片转存中…(img-pOZCIZS5-1712565875260)]
[外链图片转存中…(img-y9xbYz4h-1712565875261)]
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
[外链图片转存中…(img-90Ot56nX-1712565875261)]
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
最后
前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里获取！
[外链图片转存中…(img-JbCl5nk7-1712565875261)]
[外链图片转存中…(img-KrlLyrEq-1712565875262)]
4904
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
