CSS(二)
1. CSS的复合选择器
1.1 什么是复合选择器
-
对基本选择器进行组合形成的
-
包括:后代选择器、子选择器、并集选择器、伪类选择器等等
1.2 后代选择器(重要)
又称为包含选择器
语法:
元素1 元素2 {
样式声明}
例如:
ul li {
样式声明} /* 选择 ul 里面所有的li标签元素 */
元素1、2用空格隔开
1.3 子选择器(重要)
只能选择作为某元素的最近一级子元素
语法:
元素1>元素2{
样式声明}
上述语法表示选择元素1里面的所有直接后代元素2
例如:
div>p {
样式声明} /* 选择 div 里面所有最近以及 p 标签元素 */
元素1、2之间用大于号隔开
1.4 并集选择器(重要)
并集选择器通过**英文逗号(,)**连接
语法:
元素1,元素2 {
样式声明}
上述语法表示选择元素1和元素2
例如:
ul,div {
样式声明} /* 选择 ul 和 div 标签元素 */
1.5 伪类选择器
伪类选择器 用于向某些选择器添加某些特殊的效果,或选择第1个,第n个元素
书写的最大特点是用冒号表示,比如 :hover、 :first-child
1.6 链接伪类选择器
链接伪类选择器注意事项:
- 须按照 LVHA 的顺序声明 :link- :visited- :hover- :active。
- 记忆法:love hate
链接伪类选择器语法:
/* a 是标签选择器 所有的链接 */
a {
color: gray;
}
/* :hover 是伪类选择器 鼠标经过 */
a:hover {
color: red; /* 鼠标经过的时候,由 灰色 变为 红色 */
}