CSS3选择器 学习打卡

基本选择器

回顾选择器

通配符、元素、类、ID、后代

新增基本选择器

子元素、相邻兄弟元素、通用兄弟、群组

子元素选择器

1、概念：只能选择某元素的子元素
2、语法格式：父元素>子元素 (father>children) – 只能是儿子，孙子一下都不可以
3、兼容性：Ie8+、firefox、chrome、opera、safari

相邻兄弟元素选择器

1、概念：可以选择紧接在另一个元素后的元素，而且他们具有一个相同的父元素
2、语法：元素+兄弟相邻元素
3、兼容：ie8+ chrome safari opera Firefox

通用兄弟选择器

1、概念：某元素后面的所有兄弟，而且他们具有一个相同的父元素
2、语法：元素~后面所有兄弟元素
3、兼容：ie8+ chrome safari opera Firefox

群组选择器

1、概念：具有相同样式的元素分组在一起，每一个选择器之间用逗号, 分隔开
2、语法：元素1，元素2，。。。。元素n
3、兼容：ie6+ chrome safari opera Firefox

属性选择器

1、概念：对带有指定属性的HTML元素设置样式，你可以指定元素的某个属性，或者你也可以同时同时指定属性名和属性值
2、语法：元素[属性attribute]
3、兼容：ie8+ chrome safari opera Firefox

元素[属性=“属性值”]

1、概念：属性名=属性值
2、兼容：ie8+ chrome safari opera Firefox

元素[属性~=“属性值”]

1、概念：属性名包含属性值的元素
2、兼容：ie8+ chrome safari opera Firefox

元素[属性^=“属性值”]

1、概念：属性名以属性值开头的所有的元素
2、兼容：ie8+ chrome safari opera Firefox

元素[属性$=“属性值”]

1、概念：属性名以属性值结尾的所有的元素
2、兼容：ie8+ chrome safari opera Firefox

元素[属性*=“属性值”]

1、概念：属性名包含属性值的所有的元素
2、兼容：ie8+ chrome safari opera Firefox

元素[属性|=“属性值”]

1、概念：选择属性名=属性值或者以属性值-开头的元素
2、兼容：ie8+ chrome safari opera Firefox

伪类选择器

1. 动态伪类 – 锚点伪类，用户行为伪类
2. UI元素状态伪类
3. CSS3结构类
4. 否定选择器
5. 伪元素

动态伪类

1、用户和网站交互的时候才能体现出的动态伪类
2、锚点： :link :visited
3、用户行为伪类： :hover :active :focus

UI元素状态伪类

1、概念：我们把 :enabled :disabled :checked这一类伪类称为UI元素状态伪类
2、兼容：ie9+ chrome safari opera Firefox

结构类

1、我们把css3里的:nth选择器称之为：css3结构类
2、:first-child :last-child :nth-child(n) :nth-last-child
3、:nth-of-type :nth-last-of-type :first-of-type :last-of-type
4、:only-child :only-of-type :empty

:first-child

选择属于其父元素的首个子元素的每个element元素

:last-child

属于父元素的最后一个子元素的每个element元素

:nth-child(n)

1、匹配属于其父元素的第N个子元素，不论元素类型
2、关于参数（n）
Number – 选择某元素下的第number个element元素 1 2 3 4.。。
n(从0开始) 一个简单的表达式 2n 2n+1 2n-1 odd奇数 even偶数

:nth-last-child(n)

匹配属于其父元素的第N个子元素，不论元素的类型，从最后一个开始计算

:nth-of-type()

匹配属于父元素的特定类型第N个子元素的每个元素

:nth-last-of-type(n)

匹配属于父元素的特定类型第N个子元素的每个元素，从最后一个子元素开始计算

区别：

1、type 指定元素类型
2、Child 不限制元素类型

：first-of-type

匹配属于父元素的特定类型第N个子元素的首个子元素的每个元素

：last-of-type

匹配属于父元素的特定类型第N个子元素的最后一个子元素的每个元素

:only-child

匹配父元素的唯一子元素的每个元素

:only-of-type

匹配属于父元素的特定类型的唯一子元素的每个元素

empty

匹配没有子元素（包括文本节点）的每个子元素

否定选择器（:not）

1、选择器匹配非指定元素/选择器的每个元素 – 表示除了这个元素，其他都可以选中
2、父元素:not(子元素/子选择器)
3、兼容性：ie9+

CSS的权重

1、什么是权重：
权重是一个决定哪种规则生效，或者优先级的过程；
2、等级
行内样式（style=”” 1000）>ID选择器（100）>类、属性选择器、伪类选择器（10）>元素和伪元素(1)>*(0)
3、带有上下文关系的选择器比单纯的元素选择器权重更高
4、css基础部分的优先级

伪元素

1、概念：向选择器设置的特殊效果
2、语法格式：元素：：伪元素
3、兼容性： ie9+

::first-line

1、对第一行文本进行格式化
2、注意点：first-line只能用于块状元素 div section header

::first-letter

1、用于向文本的首字母设置特殊样式
2、注意点：first-line只能用于块状元素 div section header

::before

1、在元素的内容前面插入新内容
2、常用content配合使用
3、特点：第一个子元素 行级元素 内容通过content写入

::after

1、内容之后插入新内容
2、常用于content配合使用
3、多用于清除浮动

::selection

1、用于设置浏览器中选中文本后的样式设置
2、::selection在ie中必须IE9+可以，在火狐中必须加上前缀"-moz"

::-moz-selection{ /*针对Firefox*/
background:#cc0000;   
color:#fff;   
 }   
::selection {   
background:#cc0000;   
color:#fff;   
}  

思维导图