何为选择器?

选择器{

样式;

}

这个就是选择器,选择器用来指定样式用作的对象,也就是说用于明确样式是用来修改哪里的

标签选择器:作用于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选择器不可以