css复杂选择器

1、兄弟选择器
1、作用
通过元素的平级关系来匹配其他元素
只能向后不能向前
2、分类
1、相邻兄弟选择器
匹配指定元素的相邻兄弟
相邻：紧紧挨在指定元素的后面

			语法：
				选择器1+选择器2
				ex:
					1、div+p{}
					2、#content+.important{}

2、通用兄弟选择器
通用：某元素后面所有的兄弟元素
语法：
选择器1~选择器2
2、属性选择器
1、作用
允许使用元素所附带的属性及其值，来匹配页面的元素
2、语法
唯一一组以 [] 来进行表示的选择器
1、[attr]
attr:任意属性名称
作用：匹配 附带 attr 属性的元素

ex:
					1、[id]

页面所有附带 id 属性的元素
2、
[attr]
elem : 表示任意元素
作用：匹配附带 attr 属性的 elem 元素

ex: 
					1、p[id]

3、elem[attr1][attr2]
作用：匹配页面中所有即附带attr1属性也同时附带attr2属性的elem元素

ex:
						div[id][class]

4、elem[attr=value]
value:值
作用：匹配页面上 附带attr属性同时值为 value 的elem 元素

ex:
						input[type=text] : 获取页面所有文本框

5、elem[class~=value]
作用：匹配 附带 class 属性的 elem元素，其中class属性的值是以空格隔开的值列表，value是值列表中的一个独立值。

 6、elem[attr^=value]
				^= : 以 value 作为开始

作用：匹配附带attr属性的elem元素，并且该属性值是以value作为开始的
7、

elem[attr$=value]
				$= : 以 value 作为结束

作用：匹配附带attr属性的elem元素，并且该属性值是以value作为结束的
8、

elem[attr*=value]
				*= : 包含 value 字符即可

3、伪类选择器
1、目标伪类
1、作用
突出显示活动的HTML锚元素。匹配当前页面中活动的HTML锚元素。
2、语法
:target
2、元素状态伪类
1、作用
元素状态 ：启用，禁用，被选中(checked)
2、语法
:enabled , 匹配每个已启用元素(表单控件)
:disabled , 匹配每个已禁用元素(表单控件)
:checked , 匹配每个被选中元素(radio,checkbox)
3、结构伪类(重点)
1、:first-child
匹配 属于其父元素中的首个子元素
2、:last-child
匹配 属于其父元素中的最后一个子元素
3、:nth-child(n)
匹配 属于其父元素中的第n个子元素
4、:empty
匹配 没有子元素(包含文本)的每个元素

5、:only-child
匹配属于其父元素中的唯一子元素

<div>
	<p>Hello World</p>
</div>

4、否定伪类
1、语法
:not(选择器)
作用：将 满足选择器的元素从指定范围中排除出去
4、伪元素选择器
1、作用
伪类：匹配元素的
伪元素：匹配元素中的内容
2、语法
1、:first-letter 或 ::first-letter
匹配 指定元素的 首字符
2、:first-line 或 ::first-line
匹配 指定元素的 首行
3、::selection
匹配 被用户选取的部分
3、: 和 ::的区别
CSS3之前，所有的伪元素选择器，全部都是 使用 :，ex :first-line,:first-letter

		CSS3中，将所有的伪元素选择器全部都升级为 :: , ex ::first-letter, ::first-line

		为了能够实现浏览器的兼容性，比较推荐使用 :的写法