1 后代选择器
可以选择父元素里面的任何后代元素, 元素之间用空格隔开
语法:
/*父元素 后代元素 { 样式声明 }*/
ul li {
color: red;
}
ul li a {
color: blue;
}2 子选择器
子选择器只能选择父元素的最近一级子元素,不考虑孙子元素。可以理解为亲儿子选择器。元素之间用‘>’隔开
语法:
/*父元素>子元素*/
div>a {
color: red;
}3 并集选择器
选择多组标签,设置统一的样式。通常用于集体声明。元素之间用逗号隔开
语法:
/*元素1,元素2*/
div, p {
width: 300px;
}4 伪类选择器
用于给某些选择器添加特定的效果,或者快捷的选定某类元素。最大特点是用冒号':'表示
-
链接伪类选择器
-
用于获取链接元素
a:link {
color: black;
}
/*已访问过的链接*/
a:visited {
color: orange;
}
/*鼠标移入状态*/
a:hover {
color: red;
}
/*激活状态(按下鼠标未松开的状态)的链接*/
a:active {
color: skyblue;
}
-
-
链接伪类实际使用a {
color: black;
}
a:hover {
color: red;
} -
:focus伪类选择器
-
用于获取表单元素
input:focus {
background-color: pink;
} -
5 复合选择器总结
6 交集选择器
选择一类特定的标签。标签元素和类名之间以点号隔开
语法:
/*标签元素.类名*/
p.class1 { //类名为class1的所有p元素
color: red;
}