CSS选择器种类----8中武器

[size=large]前言:[/size]
淘宝二面时,面试官说道:“现在淘宝网前台后台半壁江山!” 而且后台的发展经过这么长时间的发展,淘宝内部的技术体系差不多已趋完善,so,做前太或许就会更加多一点。无论如何,会点前台对以后的职业生涯发展也会有所倍益的。记得当时面试官问了一些前台的知识,都不会,只记得问过关于选择器的,本文就谈谈css的选择器的知识,以纪念我那失去的淘宝供职的机会。
 
[size=large]简述:[/size]
选择器就好比招聘工作职位时的条件一样,是为了从众多的html标签中挑选出我们所需要设置的标签。设置选择器的目的是为了让我们能够对被选择出来的标签使用样式。
 
[size=large]具体一一详述: [/size]
CSS选择器大体上可以分为两类:简单选择器和组合选择器。一一详述;
 
[color=red]简单选择器: [/color]

1.       类型选择器
根据HTML的标签进行选择,写法如下:
选择器名称() 
{
属性:属性值;
}
注意:选择器名称一定要是HTML中存在的标签。
2.       属性选择器
根据HTML标签的属性进行选择,写法如下:
选择器名称【属性=属性值】 
{
属性:属性值;
}
注意:选择器名称一定要是HTML中存在的标签。
Eg:需要对居中显示的段落应用样式则可以用属性选择器。
3.       ID选择器
是一种比较精准的选择器,是根据标签的ID来决定显示的样式。标签的ID可以程序员自己设计。查找范围小,效率高。写法如下:
#ID名称 
{
属性:属性值;
}
注意:大小写敏感
4.       类选择器
通过标签的class属性中设置的值来进行选择。使用灵活性非常大。写法如下:
.类型选择器 
{
属性:属性值;
}
Eg:
.changeColor{ 
Background-color:green;
}
<h2 align=”center” class=changeColor>页面的标题</h2>
 
5.       通配选择器
通配选择比较简单,是管辖权最大的一种选择器:它可以根本就不加选择,将页面的所有一类标签都应用上指定的样式。写法如下:
*标签名称 
{
属性:属性值;
}
注意:一般慎用!!!

[color=red]组合选择器: [/color]

1.       后代选择器
后代选择器是指在一个html标签中还包含第二个标签的情况下,选择第二个标签应用样式。写法如下:
父标签  后代标签 
{
属性:属性值;
}
2.       子选择器
与后代选择器类似,但只有当一个标签是父标签的直接子代,也就是是父标签的儿子,而不是孙子标签的情况下,样式才会被应用。写法如下:
父标签 > 子标签 
{
属性:属性值;
}
3.       兄弟选择器
写法如下:
兄弟标签1+兄弟标签2 
{
属性:属性值;
}
 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值