CSS 选择器

查询文档

CSS3选择器规范地址

CSS3选择最新选择器规范

样式表的组成

• 选择器 + 声明块

• 选择器 从右往左 解析

基本选择器

/*通配符选择器*/		* {}
/*元素选择器*/		body {}
/*类选择器*/		.list {}
/*ID选择器*/		#list {}
复制代码

关系选择器

/*后代选择器*/		.list li {}
				会选中全部符合条件的后代，包括儿子，孙子，孙子的孙子...
/*子元素选择器*/		#wrap > .inner {}
				也可称为直接后代选择器,此类选择器只能匹配到直接后代，不能匹配到深层次的后代元素
/*相邻兄弟选择器*/	#wrap #first + .inner {}
				它只会匹配紧跟着的兄弟元素
/*通用兄弟选择器*/	#wrap #first ~ div {}
				它会匹配全部的兄弟元素(不须要紧跟)
/*选择器分组*/		h1,h2,h3{}  
				逗号，称之为结合符
	
复制代码

属性选择器

/*存在和值属性选择器*/	
	[attr]：该选择器选择包含 attr 属性的全部元素，不论 attr 的值为什么。
	[attr=val]：该选择器仅选择 attr 属性被赋值为 val 的全部元素。
	[attr~=val]：表示带有以 attr 命名的属性的元素，而且该属性是一个以空格做为分隔的值列表，其中至少一个值为val。
	
/*子串值属性选择器*/
	 [attr|=val] : 选择attr属性的值是val（包括val）或以val-开头的元素。
	 [attr^=val] : 选择attr属性的值以val开头（包括val）的元素。
	 [attr$=val] : 选择attr属性的值以val结尾（包括val）的元素。
	 [attr*=val] : 选择attr属性的值中包含字符串val的元素。
复制代码

伪类与伪元素选择器

连接伪类

E:link		表示做为超连接，并指向一个未访问的地址的全部锚
E:visited	表示做为超连接，并指向一个已访问的地址的全部锚
E:target 	表明一个特殊的元素，它的id是URI的片断标识符
复制代码

动态伪类

注意:hover，:active基本能够做用于全部的元素！

E:hover     表示悬浮到元素上
E:active    表示匹配被用户激活的元素（点击按住时）
复制代码

顺序为:link，:visited，:hover，:active(因为a标签的:link和:visited能够覆盖了全部a标签的状态)

• :visited选择器：只有下列的属性才能被应用到已访问连接：
  • color
  • background-color
  • border-color

表单相关伪类

E:enabled	匹配可编辑的表单
E:disable	匹配被禁用的表单
E:checked	匹配被选中的表单
E:focus		匹配获焦的表单
复制代码

结构性伪类

#wrap E:nth-child(index) //匹配wrap中的第index的子元素,这个子元素必须是E
#wrap E:nth-of-type(index) //匹配wrap中同类型的第index个的E元素
复制代码

• index的值从1开始计数！！！！
• index能够为变量n(只能是n)或者公式

:nth-child(length) /*参数是具体数字 length为整数*/
:nth-child(n) /*参数是n,n从0开始计算*/
:nth-child(n*length) /*n的倍数选择，n从0开始算*/
:nth-child(n*length+1) /*表示隔几选一*/
:nth-child(2n) / :nth-child(even) /*表示偶数*/
:nth-child(2n+1) / :nth-child(odd) /*表示奇数*/
复制代码

• :nth-child和:nth-of-type有一个很重要的区别！！
  • nth-of-type以元素为中心！！！

:nth-child(index)系列			
	E:first-child            匹配父元素的第一个子元素E
	E:last-child             匹配父元素的最后一个子元素E
	E:nth-last-child(index)  匹配父元素的倒数第n个子元素E
	E:only-child	         匹配父元素仅有的一个子元素E
:nth-of-type(index)系列
	E:first-of-type         匹配同类型中的第一个同级兄弟元素E
	E:last-of-type          匹配同类型中的最后一个同级兄弟元素E
	E:nth-last-type(index)  匹配同类型中的倒数第n个同级兄弟元素E
	E:only-of-type          匹配同类型中的惟一的一个同级兄弟元素E
复制代码

:not

假定有个列表，每一个列表项都有一条底边线，可是最后一项不须要底边线。

li:not(:last-child) {
    border-bottom: 1px solid #ddd;
}
复制代码

:empty

区分空元素

:empty(内容必须是空的，有空格都不行，有attr不要紧)
复制代码

选择不包含子元素的div元素：

div:empty
复制代码

伪元素选择器

E::after   //在目标元素E的前面插入的内容。用来和content属性一块儿使用
E::before   //在目标元素E的后面插入的内容。用来和content属性一块儿使用
E::firstLetter  //设置元素内的第一个字符的样式
E::firstLine  //设置元素内的第一行的样式
E::selection  //设置元素被选择时的字体颜色和背景颜色EE::placeholder //设置元素文字占位符的样式。(通常用于input输入框)
复制代码

::placeholder在使用时须要加上各个浏览器的前缀；除了Firefox是 ::[prefix]placeholder，其余浏览器都是使用 ::[prefix]input-placeholder。

css声明的优先级

!important > 行内样式 > #id > .class/伪类/属性> tag > * > 继承 > 默认

• 选择器的特殊性

内联声明              1,0,0,0 
    ID属性值              0,1,0,0
    类属性/属性/伪类      0,0,1,0
    元素/伪元素           0,0,0,1
    通配符选择器          0,0,0,0
    结合符对选择器特殊性没有一点贡献
    继承没有特殊性
复制代码

• 重要声明

  • !important 老是要放在声明的最后，即分号的前面

• 来源

css样式的来源大体有三种
	  创做人员
	  读者
	  用户代理   
复制代码

• 权重

读者的重要声明
创做人员的重要声明
创做人员的正常声明
读者的正常声明
用户代理的声明
复制代码

• 层叠

1.找出全部相关的规则，这些规则都包含一个选择器
		    2.计算声明的优先级
		               先按来源排序
		               在按选择器的特殊性排序
		               最终按顺序
复制代码