作者 | 让我们无忧无虑地开始上课吧
编辑 | 开三金
来源 | 公开课前端团队(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
除了这两个选择器之外,还有:
标签选择器:顾名思义,就是选择某些标签
包含选择器:这是一个组合选择器,其中一个选择器包含另一个选择器以实现精确搜索
分组选择器:将各种选择器组合在一起选择一组元素
让我们看一下这些选择器的用例:
标签选择器:
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 重置。
当我们需要为多个标签清除它们的样式时,我们可以这样写:
一点格式化应该可以解决问题。
请登录后发表评论
注册
社交帐号登录