前端基础较为扎实的“老前端”玩家不要心灰意冷

作者 | 让我们无忧无虑地开始上课吧

编辑 | 开三金

来源 | 公开课前端团队(ID:KKBWeb)

三金 说道:

为了满足前端新人的需求,这篇文章还是很接地气的,很适合前端新手阅读~前端基础扎实的“老前端”玩家不宜气馁,三金会继续为大家带来实用的深度前端干货!

感谢您的关注,给您打电话~

前五个门户:

这是一款真正属于0型小白的前端干货(一)

这是一款真正属于0型小白的前端干货(二)

这是一款真正属于0系小白的前端干货(三)

这是一款真正属于0型小白的前端干货(四)

这是一款真正属于0基础小白的前端干货(五)

1

最常见的方法是使用大纲样式,然后通过 CSS 选择器选择不同的元素,并为其添加不同的样式。

也就是说,我们从事前端工作,而在开发页面的过程中css选择器中大于号,CSS选择器是无法避免的,其重要性不言而喻。

废话不多说,我们来看一段代码:





    
    Title
    


 

结果是这样的:

然后在这段代码中,有一个style标签,就是css样式:


#box{
    width: 100px;
    height:100px;
    background: #1b6d85;
}

此代码中使用了选择器。此代码选择一个 ID 名称为 box 的元素,并为其添加我们想要的样式。里面的选择器是上一个:

#box{} 前面的“#”标识符表示此选择器将选择 ID 名称,但不选择其他属性。

紧随其后的“框”是表示选择的 ID 属性的值。然后是大括号,大括号里面写的是css样式。此选择器也称为 ID 选择器。

那么除了ID选择器之外,还有很多其他的选择器,最常见的就是类选择器,比如“.box{}”;

这是一个类选择器,一定要注意选择器名称前面有一个点!

让我们看一下代码。

之前的样式其实可以这样写:





    
    Title
    


 

请注意此代码与上一个代码之间的一个区别:

div标签上的id属性替换为class属性,里面的值不变,还是box。

第二个区别是css部分,一个小改动:框前面的“#”变成了“.”;

那么这个点代表这个选择器选择了一个类属性

一个简短的总结:


#box{}/*这是ID选择器,注意前面是用井号开头的,井号代表ID*/
.box{}/*这是class选择器,注意前面是用点开头的,点代表class*/

2

除了这两个选择器之外,还有:

图片[1]-前端基础较为扎实的“老前端”玩家不要心灰意冷-老王博客

标签选择器:顾名思义,就是选择某些标签

包含选择器:这是一个组合选择器,其中一个选择器包含另一个选择器以实现精确搜索

分组选择器:将各种选择器组合在一起选择一组元素

让我们看一下这些选择器的用例:

标签选择器:





    
    Title
    


 

比如本例中,一堆标签,当你不想给这些标签添加任何属性,然后你需要选择所有的div标签,那么你可以使用标签选择器。

标签选择器的组成为:标签名+大括号;

注意:此选择器前面不需要任何标识符。

名字不是随机的,名字就是标签名,意思是选择某个标签。

包含选择器:





    
    Title
    


 

这里是标题重要内容

当我们需要选择em标签时css选择器中大于号,其实这种情况下,我们可以直接使用em{}标签选择器;

但是在我们正常的开发中,html结构比这个复杂很多,所以为了避免此时选择其他元素,我们需要使用包含选择器:

“h1 em{}”选择器表示选择 h1 标签内的 em 标签。

此选择器也称为后代选择器。

注意:包含选择器必须用空格分隔。

此外,include 选择器选择所有后代,例如:





    
    Title
    


 

这里是标题重要内容

例如,这是包含选择器:

h1 span{} 也可以选择 h1 标签中的 span 标签。虽然 em 中包含 span 标签,但仍然可以选择。必须注意这一点。

此外,还有另一种包含选择器,称为子选择器,写为:

h1>span{},中间不再是空格,而是大于号。

这个选择器的意思是选择h1的子元素中的span元素。在上面的代码块中,span元素实际上是h1标签的孙子元素,所以这个子元素不能选择span标签。

注意:


这里是标题重要内容

在这个结构中:

使用 h1 span{} 选择器选择 span 元素;

如果您使用 h1>span{} 选择器,则无法选择 span 元素。

组选择器:





    
    Title
    


 

这里是标题重要内容

这里是副标题

这里是内容

例如,在这种结构中,当我们需要同时选择不同元素中包含的 span 元素时,可以使用组选择器。

其实多个选择器用逗号隔开,可以节省一些代码。

此选择器通常用于 css 重置。

当我们需要为多个标签清除它们的样式时,我们可以这样写:


一点格式化应该可以解决问题。

© 版权声明
THE END
喜欢就支持一下吧
点赞0
分享
评论 抢沙发

请登录后发表评论