1. CSS的复合选择器

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 链接伪类选择器

链接伪类选择器注意事项：

1. 须按照 LVHA 的顺序声明 :link- :visited- :hover- :active。
2. 记忆法：love hate

链接伪类选择器语法：

/* a 是标签选择器 所有的链接 */
a {
   
    color: gray;
}
/* :hover 是伪类选择器 鼠标经过 */
a:hover {
   
    color: red;  /* 鼠标经过的时候，由  灰色  变为  红色  */
}

1.7 :focus伪类选择器<