CSS知识点2

CSS复合选择器

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	选择后代元素	子孙后代	较多	空格隔开
子选择器	选择“亲儿子”	亲儿子	较少	大于号隔开
并集选择器	相同样式的元素	集体声明	较多	逗号隔开
链接伪类选择器	选择不同状态的链接	跟链接相关	较多	记住a{}和a:hover的写法
focus伪类选择器	获取光标的表单	表单相关	较少	记住input:focus的写法

后代选择器

• 又称包含选择器，将外层标签写前面，内存标签写在后面，中间用空格隔开，啧内层标签成为外层标签的后代

元素1 元素2 { 样式声明 }

上述表示元素1里面的所有元素2

例如：选择 ul 里面的所有 li 标签

ul li { 样式声明 }

子选择器

• 只能选择某元素的最近的一级元素，简称亲儿子选择器

元素1>元素2 { 样式声明 }

并集选择器

• 可以选择多组标签同时定义他们的样式，通常用于集体声明
• 并集选择器是各个选择器通过逗号隔开连接而成

元素1，
元素2 { 样式声明 }

伪类选择器

• 用于某些选择器添加特殊效果,比如链接的样式，或者选择第1个or第n个
• 书写的最大特点：使用冒号（:）表示，比如:hover , :first-child
• 种类繁多：链接伪类，结构伪类等

链接伪类选择器

类型	说明
a:link	选择未被访问的链接
a:visited	选择已经被访问的链接
a:hover	当鼠标悬停于链接上时
a:active	鼠标按下未弹起

注意事项：

1. 为了确保生效，按照LVHA的顺序进行书写（love hate）；
2. 实际工作中需要单独设置样式

focus伪类选择器

• 用于获取焦点的表单元素
• 焦点就是光标，一般情况< input >类表单才能获取，因此这个主要是针对表单元素来讲

例如： 把获取光标的表单元素背景设为粉色

input:focus {
	background-color:pink;
}

元素显示模式

• 元素显示模式是指元素（标签）以什么方式显示，HTML元素一般分为块元素和行内元素

块元素

• 常见的块元素：< h1~h6 >,< p >,< div >,< ul >,< ol >< li >。其中**< div >**是最典型的
• 块元素特点
  1. 独占一行
  2. 高度，宽度都可以控制
  3. 宽度默认是父类的百分百
  4. 是一个盒子模型，里面可以放行内或者块级元素
• 注意
  1. 文字类的元素无法放置块级元素
  2. < p >无法放置块级元素，< h1~h6 >同理

行内元素

• 常见的元素：< a >,< span >。
• 行内元素特点：
  1. 一行显示多个
  2. 高宽设置无效，默认宽度是他本身容器的高度
  3. 只能容纳文本类或者其他行内元素
• 注意
  1. 链接里面无法放置链接

行内块级元素

• 常见的元素：< img/ >,< input/ >,< td >。
• 行内块级元素特点
  1. 一行可以放置多个，但是彼此之间会有间隔
  2. 默认宽度是他本身的宽度
  3. 高度，行高，外边距，内边均可控制。

元素模式地转化

代码	转化形式
display:block	转换为块级
display:inline	转换为行内
display:inline-block	转化为行内块

背景元素

背景颜色

• background-color属性定义了元素的背景颜色
• 默认值是transparent

背景图片

• background-image : none | url(url)描述元素的背景图片

背景平铺

• 使用background-repeat描述背景图片的平铺

参数值	作用
repeat	默认值，xy方向的平铺
no-repeat	背景不平铺
repeat-x	x方向平铺
repeat-y	y方向平铺

背景图片位置

• 使用background-position描述图片在背景中的位置
• length:百分数 | 由浮点数和单位标识符组成的长度值
  • 一定是前面是 x 值后面是 y 值
  • 如果只写了一个参数，则一定是 x 值, y 默认垂直居中
• position:top | center | left | right 方位名词
  • 如果是方位每次，则前后顺序无关
  • 若只指定了一个方向，则第二个默认居中对齐
• 还可以使用混合单位，同样前面 x ，后面 y

背景图片的固定

• 使用background-attachment描述是否固定
• scroll背景随着内容滚动
• fixed背景固定

混合写法(没有固定写法：颜色，地址，平铺，滚动，位置)

背景色半透明

• CSS3提供了背景半透明的写法background: rgba(0,0,0,0)
• 最后一个参数范围在0~1之间

CSS三大特性

层叠性

• 给相同的选择器相同的样式，此时样式会根据就近原则覆盖另外一个样式
• 如果样式不同，则不会层叠

继承性

• 子标签会继承父标签的元素的样式( 子承父姓 )
• 可以简化CSS的代码
• 并不是所有的样式都会继承

行高的继承

• 行高可以跟单位也可以不跟单位
• 不写单位的最大优势是根据文字大小调整自己的行高

body {
	font : 12px/1.5 Microsoft Yahei;
}

优先级

• 当同一个元素有多个选择器时，优先级起作用

选择器	优先级权重
继承或者*	0,0,0,0
元素选择器	0,0,0,1
类/伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内选择器	1,0,0,0
!import重要的	无穷大

注意事项：权重没有进位而言，对于复合选择器而言，需要进行权重的相加