一、什么是选择器
选择器{
样式
}
在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。
二、选择器的种类
1.标签选择器
标签选择器其实就是html代码中的标签。如右侧代码编辑器中的<html>、<body>、<h1>、<p>、<img>。例如下面代码:
p{font-size:9px;line-height:1px}
2.类选择器
在html中用class="类选择器名称" 引用
.类选择器名称{css样式代码;}
3.ID选择器
在html中用id="ID选择器名称" 引用
.ID选择器名称{css样式代码;}
类选择器与ID选择器的异同
两者都能作用于所有标签,不同的是:在一个html文件里,ID选择器只能使用一次,而类选择器可以使用多次。此外最要的是,类选择器可以使用类选择器词列表方法为一个元素同时设置多个样式。例如:
P1{ 样式}
P2{样式}
class="P1 P2"
这样就能同时拥有P1 P2的样式
4.子类选择器和后代(包含)选择器
子类选择器
.food>li{border:1px solid red;}
后代选择器
.first span{color:red;}
两者的区别在于:子类选择器只作于第一代后代,而后代(包含)选择器则能作用于所有的后代
5.其他选择器
通用选择器:设置所有标签
*{样式}
伪类选择器:作用于html标签的状态
:hove{}
分组选择器:把相同的样式写在一起
P1,p2{样式}