何为选择器?
选择器{
样式;
}
这个就是选择器,选择器用来指定样式用作的对象,也就是说用于明确样式是用来修改哪里的
标签选择器:作用于html标签,如:
body{font-size:12px;line-height:1.6em;}
这个就是作用于< body>标签
类选择器,如:
然后使用class=”“为标签设置样式,如:
类选择器
ID选择器,与类选择器类似,如:
使用:
ID选择器
子选择器,先看代码:
子选择器
- 水果
- 香蕉
- 苹果
- 梨
- 蔬菜
- 白菜
- 油菜
- 卷心菜
上面代码中,.foot>li{} 会对class=”foot”的子标签< li>起作用,也就是对水果,蔬菜起作用
包含(后代)选择器,语法格式:
.foot li{color:red;}
子选择器使用”>”连接,只作用于下一级
包含选择器使用空格符连接,作用于所有子标签
在上面代码中如果使用包含选择器,那么不仅仅是水果,蔬菜,连同他们的子类都将发生变化。
通用选择器,语法:
*{color:red;}
通用选择器作用范围最大,会对所有html标签起作用
伪类选择符
a:hover{color:red;}
这样的效果是鼠标在移动到< a>标签上,字体颜色会变为红色,伪类选择符还有很多种状态,尤其css3中更多,不过hover是兼容最好的,使用最多的。
分组选择符
h1,span{color:red;}
相当于下面两行代码
h1{color:red;}
span{color:red;}
这样写< h1>标签和< span>标签都将发生变化
类和ID选择器的区别
相同点:可以应用于任何元素
不同点:
1、ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次。
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式,但只可以用类选择器的方法实现,ID选择器是不可以的
如下 类选择器可以这么写:
.stress{
color:red;
}
.bigsize{
font-size:25px;
}
类选择器可以同时设置两种css,而id选择器不可以