CSS复合选择器总结

复合选择器总结

CSS包括基础选择器和复合选择器，而复合选择器则是建立在基础选择器之上，对基本选择器进行组合形成的。常用复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等。

---

后代选择器
子选择器
并集选择器
伪类选择器

---

后代选择器

又称为包含选择器，可以选择父元素里面的子元素。写法就是把外层标签写在前面，内层标签依次写在后面，中间通过空格隔开。

语法：
元素1 元素2 { 样式声明 }
如：
ul li { color：red } /* 选择ul 里 li 标签 颜色为红色 */
注：

• 元素1 元素2之间通过空格隔开
• 元素1是父级，元素2是子级，最终选择元素是元素2
• 元素2可以是儿子，也可以是孙子等等，只要是元素1的子级就可以
• 元素1，元素2可以是任意基础选择器

---

子选择器

只能作为某元素的最近一级子元素，简单理解为就是亲儿子元素。

语法：
元素1 > 元素2 { 样式声明 }
上述语法表示选择元素1里面的所有直接后代子元素2。
如：
div > p { 样式声明 } /* 选择div 里 最近一级p标签元素 */
注：

• 元素1 元素2之间通过大于号隔开
• 元素1是父级，元素2是子级，最终选择元素是元素2
• 元素2必须是元素1的亲儿子

---

并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式。

语法:
元素1，元素2 { 样式声明 }
上述语法表示选择元素1，元素2
如：
ul ，div { 样式声明 } /* 选择 ul 标签 和 div 标签*/
注:

• 元素1 和元素2 之间用逗号隔开
• 逗号可以理解为和的意思
• 并集选择通常用于集体声明

---

伪类选择器

1.链接伪类选择器

语法
a：属性 { 样式声明 }

属性	解释
a:link	未被访问的链接
a:visited	已被访问的链接
a:hover	鼠标指针悬浮时的链接
a:active	鼠标点击时的链接

注：
1.为了确保生效，请按照LVHA的顺序声明： :link :visited :hover :active.
2.因为a链接在浏览器中具有默认样式，所以需要给链接单独指定样式。

2.focus伪类选择器

用于选取获得焦点的表单元素
语法：
input：focus { 样式声明 }