一.基本选择器
1.标记选择器
直接写标签名作为选择元素的依据
tag{ } span{ } h1{ }......
2.类别选择器
.class{ }直接使用类名作为选择元素的依据
3.id选择器
#id{
直接使用id作为选择元素的依据
}
1.交集选择器
由一个标签后面紧跟类别或id,必须满足两种条件才会被选中
标签名字和类名,id 一起选中。
tagname.class{ }
tagname#id{}
2.并集选择器
由一个或多个基本或复合选择器用逗号隔开,只要符合其中任意一个,就会被选中
sel1,sel2,sel3{}
3.后代选择器
sel1 sel2 sel3{
根据左祖右后代的原则,用空格隔开,
可以精准的获取特定的子辈元素
只会选中最后那个孩子,sel3.
}
4.子辈选择器
sel1>sel2{
只能获取子元素,不能获取孙元素
}
5.紧邻兄弟选择器
sel1 + sel2{ }
就是和sel1相邻的标签为sel2的兄弟元素
以下三个条件缺一不可
1.向下选取
2.两个元素相邻
3.互为兄弟
6.兄弟选择器
sel1 ~ sel2{}
以下两个条件缺一不可
1.向下选取
2.互为兄弟
不紧邻也会选中。
7.全选选择器
*{ }
相当于ctrl +a 选中所有标签
8.伪类选择器
sel1:伪类{
}
a:visited{
color:coral;
}a:hover{
color:cornflowerblue;
/* 字体倾斜 */
font-style: italic;
}
a:visited 表示链接被访问之后的样式 链接限定
a:hover 表示元素鼠标滑过时的样式,任意元素可用
引入方式的优先级,在基本选择器内
!important > 行内式 > id > 类别 > 标记