查询文档

样式表的组成

• 选择器 + 声明块

• 选择器 从右往左 解析

基本选择器

/*通配符选择器*/		* {}/*元素选择器*/		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.计算声明的优先级		               先按来源排序		               在按选择器的特殊性排序		               最终按顺序复制代码