CSS复合选择器的总结归纳

CSS复合选择器的总结归纳

定义：复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的选中目标元素标签。

分类：复合选择器共可分为5类，分别为交集选择器，并集选择器，后代选择器，子元素选择器和伪类选择器。

1.交集选择器
交集选择器由两个选择器组成。其中第一个选择器为标签选择器，第二个选择器为类名选择器。两个选择器之间用点隔开。
交集选择器 是 并且的意思。 即…又…的意思
如div.red。示例代码如下：

div.red{
		color: red;
	}
交集选择器

这样类名为class的标签的颜色就会变为红色。
2.并集选择器
并集选择器是各个选择器之间以逗号隔开，任何形式的选择器都可以作为并集选择器的一部分。如果某些选择器定义的样式相同即可用并集选择器来处理。
并集选择器有和的意思，也就是说，只要逗号隔开的，所有选择器都会执行后面的样式。
如div,p,span。示例代码如下：

div,p,span{
		color: red;
	}
并集选择器
并集选择器
并集选择器

这样这三个标签的颜色就都会变为红色
3.后代选择器

后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

子孙后代都可以这么选择。 或者说，它能选择任何包含在内 的标签。
如div p。示例代码如下：

div p{
		color: pink;
	}

		
王思聪

这样王思聪的颜色就会变为粉色。
4.子元素选择器
子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。
白话： 这里的子 指的是 亲儿子 不包含孙子 重孙子之类。
比如：ul>li>a。示例代码如下：

ul>li>a{
		color: green;
	}

		

			一级菜单
			

				二级菜单
				二级菜单
				二级菜单
			
		
	

这样一级菜单的颜色就会变为绿色。
5.伪类选择器
伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。
伪娘
类 .one
伪类 :link
链接伪类选择器

• link /* 未访问的链接 */
• visited /* 已访问的链接 */
• hover /* 鼠标移动到链接上 */
• active /* 选定的链接 */

	
	
	


	秒杀