CSS3：基本、属性、伪类选择器
一、基本选择器
回顾选择器
通配符选择器、元素选择器、类选择器、ID选择器、后代选择器
新增基本选择器
子元素选择器、相邻兄弟元素选择器、通用兄弟选择器、群组选择器
1.基本选择器——子元素选择器
【概念】：子元素选择器只能选择某元素的子元素（直接后代选择器）
语法格式：父元素>子元素（father>children）
【兼容性】：IE8+、FireFox、chrome、Safari、opera
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子元素选择器</title>
<style type="text/css">
section > div {
color: #f00;
}
</style>
</head>
<body>
<section>
<article>
<div>article里面的文字</div>
</article>
<div>article外面的文字</div>
</section>
</body>
</html>
效果
2.基本选择器——相邻兄弟元素选择器
【概念】：相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素。
语法格式：元素+兄弟相邻元素（Element+Sibling）
【兼容性】：IE8+、FireFox、chrome、Safari、oper
<meta charset="UTF-8">
<title>兄弟元素选择器</title>
<style type="text/css">
section > div + article {
color: #f00;
}
</style>
</head>
<body>
<section>
<div>article外面的文字</div>
<article>
<div>article里面的文字</div>
</article>
<article>
<div>article里面的文字</div>
</article>
</section>
</body>
</html>
效果
3.基本选择器——通用兄弟选择器
【概念】：选择某元素后面的所有兄弟元素，而且他们具有一个相同的父元素
语法格式：元素后面所有兄弟相邻元素（Element Siblings）
【兼容性】IE8+、FireFox、chrome、Safari、oper
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通用兄弟选择器</title>
<style type="text/css">
section > div ~ article {
color: #f00;
}
</style>
</head>
<body>
<section>
<article>
<div>article里面的文字</div>
</article>
<div>article外面的文字</div>
<article>
<div>article里面的文字</div>
</article>
<article>
<div>article里面的文字</div>
</article>
<article>
<div>article里面的文字</div>
</article>
<article>
<div>article里面的文字</div>
</article>
<article>
<div>article里面的文字</div>
</article>
</section>
</body>
</html>
效果
4.基本选择器——群组选择器
【概念】：群组选择器是将具有相同样式的元素分组在一起，每个选择器之间使用逗号“,”隔开
【语法格式】：元素1,元素2, ..., 元素n（Eelement1, Element2, ..., Elementn）
【兼容性】：IE6+、FireFox、chrome、Safari、oper
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>群组选择器</title>
<style type="text/css">
section > article,
section > aside,
section > div {
color: #f00;
margin-top: 10px;
background: #abcdef;
}
</style>
</head>
<body>
<section>
<article>article</article>
<aside>aside</aside>
<div>div</div>
</section>
</body>
</html>
效果
二、属性选择器
对带有指定属性的HTML元素设置样式
使用CSS3属性选择器，你可以只指定元素的某个属性，或者你还可以同时指定元素的某个属性和其对应的属性值。
Element[attribute]
【概念】：为带有attribute属性的Element元素设置样式
【兼容性】：IE8+、FireFox、chrome、Safari、opera
Element[attribute=“value”]
【概念】：为attribute=“value”属性的Element元素设置样式
【兼容性】：IE8+、FireFox、chrome、Safari、opera
Element[attribute~=“value”]
【概念】：选择attribute属性包含单词“value”的元素，并设置其样式
【兼容性】：IE8+、FireFox、chrome、Safari、opera
习题：one，two，three，four，five哪个变红？
答案：one，two
Element[attribute^=“value”]
【概念】：设置attribute属性值以“value”开头的所有Element元素的样式
【兼容性】：IE8+、FireFox、chrome、Safari、opera
Element[attribute$=“value”]
【概念】设置attribute属性值以“value”结尾的所有**Element元素的样式
【兼容性】：IE8+、FireFox、chrome、Safari、opera
Element[attribute*=“value”]
【概念】：设置attribute属性值包含“value”的所有Element元素的样式
【兼容性】：IE8+、FireFox、chrome、Safari、opera
Element[attribute|=“value”]
【概念】：选择attribute属性值以“”value-”**开头的元素，并设置其样式
【兼容性】：IE8+、FireFox、chrome、Safari、opera
三、伪类选择器
动态伪类
锚点伪类、用户行为伪类
UI
元素状态伪类
CSS3结构类
否定选择器
伪元素
·动态伪类
动态伪类
这些伪类并不存在于HTML中，只有当用户和网站交互的时候才能体现出来
1.锚点伪类
:link, :visited
2.用户行为伪类
:hover, :active, :focus
案例:focus案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>动态伪类</title>
<style type="text/css">
input{
width: 200px;
height: 30px;
border: 5px solid #f00;
}
input:focus{
background: #abcdef;
}
</style>
</head>
<body>
<input type="text">
</body>
</html>
伪类选择器.gif
·UI元素状态伪类
【概念】：把":enabled",":disabled",":checked"伪类称为UI元素状态伪类
【兼容性】：
":enabled",":disabled"：IE9+、FireFox、Chrome、Safari、Opera
":checked仅opera
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>UI元素状态伪类</title>
<style type="text/css">
input{
width: 200px;
height: 30px;
}
input:enabled{
width: 200px;
height: 30px;
border: 1px solid #f00;
}
input:disabled{
background: #abcdef;
border: 1px solid #ff0;
}
</style>
</head>
<body>
<input type="text" disabled="disabled">
<input type="text">
<input type="text">
</body>
</html>
UI元素伪类enabled，disabled.gif
·CSS3结构类
CSS3的:nth选择器
【概念】：我们把CSS3的:nth选择器也成为CSS3结构类
选择方法：
:first-child、:last-child、:nth-child()、:nth-last-child()、:nth-of-type()、:nth-last-of-type()、:first-of-type、:last-of-type、:only-child、:only-of-type、:empty
1.Element:first-child
【概念】
选择属于其父元素的首个子元素的每个Element元素，并为其设置样式
【兼容性】
IE8+、FireFox、Chrome、Safari、Opera
2.Element:last-child
【概念】
选择属于其父元素的最后一个子元素的Element元素，并为其设置样式
【兼容性】
IE8+、FireFox、Chrome、Safari、Opera
Element:nth-child(N)
【概念】
nth-child(N)选择器匹配属于其父元素的第N个子元素，不论元素的类型
【兼容性】
IE9+、FireFox4+、Chrome、Safari、Opera
·关于参数（N）
1.Element:nth-child(number)
选择某元素下的第number个Element元素关于参数(N)
2.Element:nth-child(n)
n是一个简单表达式，取值从“0”开始计算。这里只能是“n”，不能用其他字母代替。
3.Element:nth-child(odd)、Element:nth-child(even)
odd和even是可用于匹配下标是奇数或偶数的Element元素的关键词（第一个的下标是1）
案例题：
列表UL背景颜色有没有变化？
列表项奇数项还是偶数项为绿色？
odd,even的练习题
答案：ul 没有变化；奇数项为绿色
4.Element:nth-last-child(N)
【概念】
匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。（注意：直接从1开始计数，不是0，与JS有区别）
【兼容性】
IE9+、FireFox4+、Chrome、Safari、Opera
5.Element:nth-of-type(N)
【概念】
:nth-of-type(N)选择器匹配属于父元素的特定类型的第N个子元素的每个元素
【兼容性】
IE9+、FireFox4+、Chrome、Safari、Opera
案例div:nth-of-type(N)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nth-of-type</title>
<style type="text/css">
div:nth-of-type(2) {
color: #f00;
}
</style>
</head>
<body>
<div>0-1</div>
<section>
<div>1-1</div>
<div>1-2</div>
<div>1-3</div>
</section>
<div>0-2</div>
<div>0-3</div>
<section>
<div>2-1</div>
<div>2-2</div>
<div>2-3</div>
</section>
</body>
</html>
上述源码的1-2;0-2;2-2会变红
对比案例div:nth-child
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>noth-child</title>
<style type="text/css">
div:nth-child(2) {
color: #f00;
}
</style>
</head>
<body>
<div>0-1</div>
<section>
<div>1-1</div>
<div>1-2</div>
<div>1-3</div>
</section>
<div>0-2</div>
<div>0-3</div>
<section>
<div>2-1</div>
<div>2-2</div>
<div>2-3</div>
</section>
</body>
</html>
上述源码：1-2和2-2会变红
6.Element:nth-last-of-type(N)
【概念】
匹配属于父元素的特定类型的第N个子元素的每个元素，从最后一个子元素开始计数
【兼容性】
IE9+、FireFox4+、Chrome、Safari、Opera
【注意对比】：
nth-last-of-type(n)指定元素类型
nth-last-child(n)不指定元素类型
案例：div:nth-last-0f-type(2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nth-Last-of-type</title>
<style type="text/css">
div:nth-last-of-type(2) {
color: #f00;
}
</style>
</head>
<body>
<div>0-1</div>
<section>
<div>1-1</div>
<div>1-2</div>
<div>1-3</div>
</section>
<div>0-2</div>
<div>0-3</div>
<section>
<div>2-1</div>
<div>2-2</div>
<div>2-3</div>
</section>
</body>
</html>
1-2,0-2,2-2变红
对比案例div:nth-last-child(2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nth-Last-child</title>
<style type="text/css">
div:nth-last-child(2) {
color: #f00;
}
</style>
</head>
<body>
<div>0-1</div>
<section>
<div>1-1</div>
<div>1-2</div>
<div>1-3</div>
</section>
<div>0-2</div>
<div>0-3</div>
<section>
<div>2-1</div>
<div>2-2</div>
<div>2-3</div>
</section>
</body>
</html>
1-2,0-3,2-2变红
7.Element:first-of-type
【概念】
:first-of-type选择器匹配属于其父元素的特定类型的首个子元素的每个元素
相当于noth-of-type(1)
【兼容性】
IE9+、FireFox、Chrome、Safari、Opera
案例first-of-type
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First-of-type</title>
<style type="text/css">
div:first-of-type {
color: #f00;
}
</style>
</head>
<body>
<div>0-1</div>
<section>
<div>1-1</div>
<div>1-2</div>
<div>1-3</div>
</section>
<div>0-2</div>
<div>0-3</div>
<section>
<div>2-1</div>
<div>2-2</div>
<div>2-3</div>
</section>
</body>
</html>
效果：0-1,1-1,2-1
8.Element:last-of-type
【概念】
:last-of-type选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素
【兼容性】
IE9+、FireFox、Chrome、Safari、Opera
案例last-of-type
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Last-of-type</title>
<style type="text/css">
div:last-of-type {
color: #f00;
}
</style>
</head>
<body>
<div>0-1</div>
<section>
<div>1-1</div>
<div>1-2</div>
<div>1-3</div>
</section>
<div>0-2</div>
<div>0-3</div>
<section>
<div>2-1</div>
<div>2-2</div>
<div>2-3</div>
</section>
</body>
</html>
案例效果：1-3,0-3,2-3红色
9.Element:only-child
【概念】
:only-child选择器匹配属于其父元素的唯一子元素的每个元素
【兼容性】
IE9+、FireFox、Chrome、Safari、Opera
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>only-child</title>
<style type="text/css">
article:only-child {
background: #f00;
}
</style>
</head>
<body>
<section>
<article>1</article>
<article>2</article>
</section>
<section>
<article>3</article>
</section>
<section>
<div>4</div>
<article>5</article>
<div>6</div>
</section>
<section>
<div>7</div>
<article>8</article>
<article>9</article>
<div>10</div>
</section>
</body>
</html>
效果：仅第3个背景红色
10.Element:only-of-type
【概念】
:only-of-type选择器匹配属于其父元素的特定类型的唯一子元素的每个元素
【兼容性】
IE9+、FireFox4+、Chrome、Safari、Opera
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>only-of-type</title>
<style type="text/css">
article:only-of-type {
background: #f00;
}
</style>
</head>
<body>
<section>
<article>1</article>
<article>2</article>
</section>
<section>
<article>3</article>
</section>
<section>
<div>4</div>
<article>5</article>
<div>6</div>
</section>
<section>
<div>7</div>
<article>8</article>
<article>9</article>
<div>10</div>
</section>
</body>
</html>
效果：3和5都是红色。
11.Element:empty
【概念】
:empty选择器匹配没有子元素（包括文本节点）的每个元素
【兼容性】
IE9+、FireFox、Chrome、Safari、Opera
12.否定选择器（:not）
【概念】
:not(Element/selector)选择器匹配非指定元素/选择器的每个元素
【语法格式】
父元素:not(子元素/子选择器) （Father:not(Children/selector)）
【兼容性】
IE9+、FireFox、Chrome、Safari、Opera
not案例：最后一个竖线清除
最后一个竖线清除效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>not</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
}
a {
text-decoration: none;
color: #333;
font-size: 14px;
display: block;
float: left;
width: 100px;
height: 30px;
}
nav {
width: 800px;
margin: 0 auto;
}
nav > a:not(:last-of-type) {
border-right: 1px solid red;
}
</style>
</head>
<body>
<nav>
<a href="#">first</a>
<a href="#">second</a>
<a href="#">third</a>
<a href="#">fourth</a>
<a href="#">fifth</a>
</nav>
</body>
</html>
三、伪元素
CSS伪元素用于向某些选择器设置特殊效果
【语法格式】
元素::伪元素（Element::pseudo-element）
【兼容性】
IE9+、FireFox、Chrome、Safari、Opera
【备注】
对于新版本的浏览器，伪元素:或::都可以，用两个:是为了和之前的选择器进行区分。
伪元素和伪类是不同的：
伪类：整体是个选择器，它选中的只是针对一个元素
伪元素：在之前的元素中，增加了一个在HTML并不存在的元素，即相当于伪造的元素。
1.伪元素——Element::first-line
【概念】
根据“first-line”伪元素中的样式对Element元素的第一行文本进行格式化
【说明】
“first-line”伪元素只能用于块级元素
2.伪元素——Element::first-letter
【概念】
用于向文本的首字母设置特殊样式
【说明】
“first-letter”伪元素只能用于块级元素
3.伪元素——Element::before
【概念】
在元素的内容前面插入新内容
【说明】
常用“content”配合使用
【注意】::before伪元素的特点：
1、第一个子元素
2、行级元素
3、内容通过content写入
4、标签中找不到对应的标签
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>before</title>
<style type="text/css">
div {
width: 300px;
height: 100px;
border: 1px solid #000;
}
div::before {
content: "我在内容的前面";
}
</style>
</head>
<body>
<div>伪元素</div>
</body>
</html>
源码效果：
4.伪元素——Element::after
【概念】
在元素的内容后面插入新内容
【说明】
常用“content”配合使用，多用于清除浮动
Element::after清除浮动案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clear</title>
<style type="text/css">
header {
background: #abcdef;
}
header::after {
display: block;
content: "";
clear: both;
}
header > article {
float: left;
width: 40%;
height: 30px;
background: #f00;
}
header > aside {
float: right;
width: 40%;
height: 50px;
background: #ff0;
}
</style>
</head>
<body>
<header>
<article></article>
<aside></aside>
</header>
</body>
</html>
5.伪元素——Element::selection
【概念】
用于设置在浏览器中选中文本后的背景色与前景色
【兼容性】
::selection在IE家族中，只有IE9+版本支持，在Firefox中需要加上其前缀“-moz”
案例：
selection效果.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Selection</title>
<style type="text/css">
div::selection {
background: red;
color: #ff0;
}
</style>
</head>
<body>
<div>SelectionSelectionSelectionSelectionSelectionSelectionSelection</div>
</body>
</html>
CSS权重
什么是权重
当很多的规则被应用到某一个元素上时，权重是一个决定哪种规则生效，或者是优先级的过程
权重等级与权值
行内样式（1000）>ID选择器（100）>类、属性选择器和伪类选择器（10）>元素和伪类（1）>*(0)
权重计算口诀
从0开始，一个行内样式+1000，一个id+100，一个属性选择器、class或者伪类+10，一个元素名或者伪元素+1
CSS权重规则
包含更高权重选择器的一条规则拥有更高的权重
ID选择器（idValue）的权重比属性选择器（[id="idValue"]）高带有上下文关系的选择器比单纯的元素选择器权重要高
带有上下文关系的选择器比单纯的元素选择器权重要高
与元素“挨得近”的规则生效
最后定义的这条规则会覆盖上面与之冲突的规则
无论多少个元素组成的选择器，都没有一个class选择器权重高
通配符选择器权重是0，被继承的CSS属性也带有权重，权重也是0
