[size=large]前言:[/size]
淘宝二面时,面试官说道:“现在淘宝网前台后台半壁江山!” 而且后台的发展经过这么长时间的发展,淘宝内部的技术体系差不多已趋完善,so,做前太或许就会更加多一点。无论如何,会点前台对以后的职业生涯发展也会有所倍益的。记得当时面试官问了一些前台的知识,都不会,只记得问过关于选择器的,本文就谈谈css的选择器的知识,以纪念我那失去的淘宝供职的机会。
[size=large]简述:[/size]
选择器就好比招聘工作职位时的条件一样,是为了从众多的html标签中挑选出我们所需要设置的标签。设置选择器的目的是为了让我们能够对被选择出来的标签使用样式。
[size=large]具体一一详述: [/size]
CSS选择器大体上可以分为两类:简单选择器和组合选择器。一一详述;
[color=red]简单选择器: [/color]
1. 类型选择器
根据HTML的标签进行选择,写法如下:
2. 属性选择器
根据HTML标签的属性进行选择,写法如下:
Eg:需要对居中显示的段落应用样式则可以用属性选择器。
3. ID选择器
是一种比较精准的选择器,是根据标签的ID来决定显示的样式。标签的ID可以程序员自己设计。查找范围小,效率高。写法如下:
4. 类选择器
通过标签的class属性中设置的值来进行选择。使用灵活性非常大。写法如下:
5. 通配选择器
通配选择比较简单,是管辖权最大的一种选择器:它可以根本就不加选择,将页面的所有一类标签都应用上指定的样式。写法如下:
[color=red]组合选择器: [/color]
1. 后代选择器
后代选择器是指在一个html标签中还包含第二个标签的情况下,选择第二个标签应用样式。写法如下:
与后代选择器类似,但只有当一个标签是父标签的直接子代,也就是是父标签的儿子,而不是孙子标签的情况下,样式才会被应用。写法如下:
写法如下:
淘宝二面时,面试官说道:“现在淘宝网前台后台半壁江山!” 而且后台的发展经过这么长时间的发展,淘宝内部的技术体系差不多已趋完善,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
{
属性:属性值;
}